prepare shopping cart feature

src/components/Flatastic/Flatastic.tsx

@@ -43,6 +43,9 @@ function choreItem(chore: FlatasticChore, idToNameMap: Record<number, string>) {
 export default function Flatastic() {
     const fetchFlatasticData = useFlatasticStore((state) => state.fetch);
     const flatasticData = useFlatasticStore((state) => state.flatasticData);
+
+    console.log("flatasticData", flatasticData);
+
     const chores = (flatasticData?.chores as FlatasticChore[]) || [];
     const regularChores: FlatasticChore[] = [];
     const irregularChores: FlatasticChore[] = [];
@@ -81,12 +84,33 @@ export default function Flatastic() {
         return choreItem(chore, idToNameMap);
     });
 
+    // TODO: implement shopping list
+    // const shoppingList = flatasticData?.shoppingList || [];
+
+    // const shoppingListRender = shoppingList.map((item) => {
+    //     return (
+    //         <li key={item.id} className={style.shoppingListItem}>
+    //             {item.itemName}
+    //         </li>
+    //     );
+    // });
+    // const shoppingListContainer = shoppingList.length > 0 && (
+    //     <div className={style.shoppingListContainer}>
+    //         <h1>Shopping List</h1>
+    //         <ul className={style.shoppingList}>{shoppingListRender}</ul>
+    //     </div>
+    // );
+
     return (
         <div className={style.container}>
-            <h1>Chores</h1>
-            <ul className={style.choreList}>
-                {[...regularChoresRender, ...irregularChoresRender]}
-            </ul>
+            <div className={style.choreContainer}>
+                <h1>Chores</h1>
+                <ul className={style.choreList}>
+                    {[...regularChoresRender, ...irregularChoresRender]}
+                </ul>
+            </div>
+
+            {/* {shoppingListContainer} */}
         </div>
     );
 }

src/components/Flatastic/style.module.css

@@ -1,5 +1,21 @@
 .container {
     padding: 1px 100px 30px 100px;
+    display: flex;
+    flex-direction: row;
+}
+
+.choreContainer {
+    flex: 7;
+}
+
+.shoppingListContainer {
+    flex: 3;
+    padding-left: 20px;
+}
+
+.shoppingList {
+    list-style-type: none;
+    padding: 10px 0;
 }
 
 .choreList {