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.",

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;

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;*/
+/*  }*/
+/*}*/

changelog-app-ui/src/components/feed.module.css

@@ -12,6 +12,7 @@
   display: flex;
   flex-direction: column;
   flex: 0 1 60%;
+  width: 100%;
 }
 
 .cardBottom {

changelog-app-ui/src/index.css

@@ -21,26 +21,7 @@ body {
   /*min-height: 100vh;*/
 }
 
-h1 {
+/*h1 {*/
-  font-size: 3.2em;
+/*  font-size: 3.2em;*/
-  line-height: 1.1;
+/*  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;
-}