From 7749c004b3e482d6c61468c447a94897e014fc6e Mon Sep 17 00:00:00 2001
From: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date: Wed, 4 Sep 2024 22:06:43 -0400
Subject: [PATCH] feat: new code for inputs

---
 changelog-app-ui/src/App.jsx                  | 13 ++++--
 .../src/components/changeLogInput.jsx         | 39 ++++++++++++++++
 .../src/components/changeLogInput.module.css  | 45 +++++++++++++++++++
 .../src/components/feed.module.css            |  1 +
 changelog-app-ui/src/index.css                | 27 ++---------
 5 files changed, 98 insertions(+), 27 deletions(-)
 create mode 100644 changelog-app-ui/src/components/changeLogInput.jsx
 create mode 100644 changelog-app-ui/src/components/changeLogInput.module.css

diff --git a/changelog-app-ui/src/App.jsx b/changelog-app-ui/src/App.jsx
index 7862980..8a0ec1f 100644
--- a/changelog-app-ui/src/App.jsx
+++ b/changelog-app-ui/src/App.jsx
@@ -1,20 +1,25 @@
 //import "./App.css";
 import { useState } from "react";
 import Feed from "./components/feed";
+import ChangeLogInput from "./components/changeLogInput";
 
 function App() {
   const [feed, setFeed] = useState(tempData);
+  const [logInput, setLogInput] = useState("");
+
   return (
     <>
+      <ChangeLogInput
+        setLogInput={setLogInput}
+        logInput={logInput}
+        feed={feed}
+        setFeed={setFeed}
+      />
       <Feed entries={feed} />
     </>
   );
 }
 
-//body={item.body}
-//topics={item.topics}
-//date={item.date}
-
 const tempData = [
   {
     body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae nibh velit. Vivamus maximus elit et eleifend hendrerit. Praesent ac metus eget risus accumsan finibus. Cras tempor dignissim dolor, ut tempus tortor interdum non. Sed sit amet fringilla turpis. Sed congue feugiat orci, vel iaculis libero venenatis eu.",
diff --git a/changelog-app-ui/src/components/changeLogInput.jsx b/changelog-app-ui/src/components/changeLogInput.jsx
new file mode 100644
index 0000000..bb05f2d
--- /dev/null
+++ b/changelog-app-ui/src/components/changeLogInput.jsx
@@ -0,0 +1,39 @@
+import PropTypes from "prop-types";
+import styles from "./changeLogInput.module.css";
+
+const ChangeLogInput = (props) => {
+  const handleClick = (e) => {
+    const newEntry = {
+      body: props.logInput,
+      topics: ["test"],
+      date: new Date().toLocaleDateString(),
+      id: crypto.randomUUID(),
+    };
+
+    props.setFeed([newEntry, ...props.feed]);
+    props.setLogInput("");
+  };
+  return (
+    <div className={styles.container}>
+      <textarea
+        rows="1"
+        placeholder="What did you change..."
+        className={styles.input}
+        onChange={(e) => props.setLogInput(e.target.value)}
+        value={props.logInput}
+      />
+      <button onClick={handleClick} className={styles.btn}>
+        Submit
+      </button>
+    </div>
+  );
+};
+
+ChangeLogInput.propTypes = {
+  setLogInput: PropTypes.func,
+  logInput: PropTypes.string,
+  feed: PropTypes.array,
+  setFeed: PropTypes.func,
+};
+
+export default ChangeLogInput;
diff --git a/changelog-app-ui/src/components/changeLogInput.module.css b/changelog-app-ui/src/components/changeLogInput.module.css
new file mode 100644
index 0000000..2283439
--- /dev/null
+++ b/changelog-app-ui/src/components/changeLogInput.module.css
@@ -0,0 +1,45 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.input {
+  outline: 1px solid black;
+  width: 100%;
+}
+
+.btn {
+  width: 25%;
+}
+
+/*.inputSizer {*/
+/*  display: inline-grid;*/
+/*  vertical-align: top;*/
+/*  align-items: center;*/
+/*  position: relative;*/
+/**/
+/*  &.stacked {*/
+/*    align-items: stretch;*/
+/**/
+/*    &::after,*/
+/*    textarea {*/
+/*      grid-area: 2 / 1;*/
+/*    }*/
+/*  }*/
+/*  &::after,*/
+/*  textarea {*/
+/*    width: auto;*/
+/*    grid-area: 1 / 2;*/
+/*    resize: none;*/
+/*    background: none;*/
+/*    appearance: none;*/
+/*    border: none;*/
+/*  }*/
+/*  &::after {*/
+/*    content: attr(data-value) " ";*/
+/*    visibility: hidden;*/
+/*    white-space: pre-wrap;*/
+/*  }*/
+/*}*/
diff --git a/changelog-app-ui/src/components/feed.module.css b/changelog-app-ui/src/components/feed.module.css
index 9a713f8..17c898b 100644
--- a/changelog-app-ui/src/components/feed.module.css
+++ b/changelog-app-ui/src/components/feed.module.css
@@ -12,6 +12,7 @@
   display: flex;
   flex-direction: column;
   flex: 0 1 60%;
+  width: 100%;
 }
 
 .cardBottom {
diff --git a/changelog-app-ui/src/index.css b/changelog-app-ui/src/index.css
index a0e089a..fa06962 100644
--- a/changelog-app-ui/src/index.css
+++ b/changelog-app-ui/src/index.css
@@ -21,26 +21,7 @@ body {
   /*min-height: 100vh;*/
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
+/*h1 {*/
+/*  font-size: 3.2em;*/
+/*  line-height: 1.1;*/
+/*}*/