merging master

src/Items/Items.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function Item({ item }) {
+  return (
+    <div style={{ textDecoration: item.completed ? "line-through" : "" }}>
+      {item.title}
+    </div>
+  )
+}

src/NewItem/NewItem.js

@@ -0,0 +1,23 @@
+import React, {useState} from 'react';
+
+export default function NewItem({ addItem }) {
+  const [value, setValue ] = useState("");
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    if(!value) return;
+
+    addItem(value);
+    setValue("");
+  }
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="text"
+        value={value}
+        placeholder="stuff"
+        onChange={e => setValue(e.target.value)}
+        />
+    </form>
+  )
+}

src/boxes/Boxes.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './Boxes.module.css'
+import Cards from '../cards/Cards.js'
+
+export default function Boxes({ sectionName }) {
+  return (
+    <div>
+      <h3>{sectionName}</h3>
+      <div className={styles.box}>
+        <Cards />
+      </div>
+    </div>
+  )
+}

src/boxes/Boxes.module.css

@@ -0,0 +1,3 @@
+.box{
+  border: .15rem solid black;
+}

src/cards/Cards.js

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import Item from '../Items/Items.js';
+import NewItem from '../NewItem/NewItem.js'
+
+export default function Cards({}) {
+
+  const [item, setItem] = useState(['']);
+
+        const addItem = title => {
+          const newItem = [...item, {title, completed: false}];
+          setItem(newItem)
+        }
+
+  return (
+    <div>
+      {item.map((item, index) => (
+                      <Item
+                          item={item}
+                          index={index}
+                          key={index}
+                      />
+                  ))}
+      <NewItem addItem={addItem} />
+    </div>
+  )
+}