From b9e1b913fe7683b795605ca80eafa2f089651c82 Mon Sep 17 00:00:00 2001
From: Joe Banks <joe@jb3.dev>
Date: Sun, 25 Aug 2024 04:04:59 +0100
Subject: [PATCH] Add store front page

---
 thallium-frontend/src/pages/StorePage.tsx | 41 +++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 thallium-frontend/src/pages/StorePage.tsx

diff --git a/thallium-frontend/src/pages/StorePage.tsx b/thallium-frontend/src/pages/StorePage.tsx
new file mode 100644
index 0000000..6899bd8
--- /dev/null
+++ b/thallium-frontend/src/pages/StorePage.tsx
@@ -0,0 +1,41 @@
+import { useSelector } from "react-redux";
+import { RootState } from "../store";
+import { useEffect, useState } from "react";
+
+import { Template, getTemplates } from "../api/templates";
+import StoreItem from "../components/StoreItem";
+import styled from "styled-components";
+
+const StoreGrid = styled.div`
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+    gap: 2rem;
+    margin-left: 1rem;
+    margin-right: 1rem;
+`;
+
+const StorePage = () => {
+    const voucherToken = useSelector((state: RootState) => state.authorization.voucherToken);
+    const [storeItems, setStoreItems] = useState<Template[] | null>(null);
+
+    useEffect(() => {
+        getTemplates(true).then(setStoreItems).catch((err: unknown) => {
+            setStoreItems([]);
+            console.error(err);
+        });
+    }, [voucherToken]);
+
+    return (
+        <>
+            <h1>Giveaway Store</h1>
+            <StoreGrid>
+                {storeItems?.map((item) => (
+                    <StoreItem key={item.template_id} template={item} />
+                ))}
+            </StoreGrid>
+
+        </>
+    );
+};
+
+export default StorePage;