WIP Testing Cart

package.json

@@ -19,10 +19,12 @@
     "@types/node": "20.6.3",
     "@types/react": "18.2.22",
     "@types/react-dom": "18.2.7",
+    "boostrap": "^2.0.0",
     "dotenv": "^16.3.1",
     "eslint-config-next": "13.5.2",
     "next": "^13.5.4",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.9.0",
     "react-dom": "18.2.0",
     "styled-components": "^6.0.8"
   },

src/app/Store.tsx

@@ -0,0 +1,41 @@
+import { Col, Row } from "react-bootstrap"
+import { useEffect, useState } from "react"
+import { StoreItem } from "../components/cart/StoreItem"
+import {fetchProducts} from "../supabase/product_queries"
+import {Product} from "../schema/schema"
+// eslint-disable-next-line import/prefer-default-export
+export function Store() {
+
+  const [storeItems, setStoreItems] = useState<Product[]>([]); // State to store the fetched products
+
+  useEffect(() => {
+    // Function to fetch products and set them in the state
+    const fetchStoreItems = async () => {
+      try {
+        const response = await fetchProducts();
+        if (response.data) {
+          setStoreItems(response.data);
+        } else {
+          console.error('Error fetching products:', response.error);
+        }
+      } catch (error) {
+        console.error('Error fetching products:', error);
+      }
+    };
+
+    fetchStoreItems();
+  }, []);
+
+  return (
+    <>
+      <h1>Store</h1>
+      <Row md={2} xs={1} lg={3} className="g-3">
+        {storeItems.map(item => (
+          <Col key={item.product_id}>
+            <StoreItem id={0} {...item} />
+          </Col>
+        ))}
+      </Row>
+    </>
+  )
+}