From d0649776ed4c4c1b21131056f0692e25bd99211f Mon Sep 17 00:00:00 2001
From: alex <alex@roese.dev>
Date: Wed, 24 Jan 2024 17:23:01 +0100
Subject: [PATCH] website

---
 public/locales/de/translation.json            |  10 ++
 public/locales/en/translation.json            |  10 ++
 src/Components/MySupsenseFallback/index.js    |  21 +++-
 src/Pages/Store/Website/Banner/index.js       |   3 +
 src/Pages/Store/Website/ColorPalette/index.js |   3 +
 src/Pages/Store/Website/General/index.js      |   3 +
 src/Pages/Store/Website/index.js              | 104 +++++++++++++++---
 7 files changed, 134 insertions(+), 20 deletions(-)
 create mode 100644 src/Pages/Store/Website/Banner/index.js
 create mode 100644 src/Pages/Store/Website/ColorPalette/index.js
 create mode 100644 src/Pages/Store/Website/General/index.js

diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json
index 98e2e79..ff333f3 100644
--- a/public/locales/de/translation.json
+++ b/public/locales/de/translation.json
@@ -188,6 +188,16 @@
       "title": "Sie haben noch keine Website erstellt",
       "subTitle": "Jetzt loslegen und Ihre Website erstellen.",
       "button": "Website erstellen"
+    },
+    "tabs": {
+      "general": "Allgemein",
+      "banner": "Banner",
+      "colorPalette": "Farbpalette",
+      "portfolio": "Portfolio",
+      "ratings": "Bewertungen",
+      "footer": "Fußzeile",
+      "imprint": "Impressum",
+      "dataPrivacy": "Datenschutz"
     }
   }
 }
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 1362aa3..79d7c6d 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -191,6 +191,16 @@
       "title": "You have not yet created a website",
       "subTitle": "Get started now and create your website.",
       "button": "Create website"
+    },
+    "tabs": {
+      "general": "General",
+      "banner":  "Banner",
+      "colorPalette": "Color palette",
+      "portfolio": "Portfolio",
+      "ratings": "Ratings",
+      "footer": "Footer",
+      "imprint": "Imprint",
+      "dataPrivacy": "Data privacy"
     }
   }
 }
diff --git a/src/Components/MySupsenseFallback/index.js b/src/Components/MySupsenseFallback/index.js
index b95a85c..dabdf0b 100644
--- a/src/Components/MySupsenseFallback/index.js
+++ b/src/Components/MySupsenseFallback/index.js
@@ -2,13 +2,26 @@ import { Spin } from "antd";
 import { Suspense } from "react";
 import MyCenteredContainer from "../MyContainer";
 
-export function MySupsenseFallback({ children }) {
+export function MySupsenseFallback({ children, spinnerCentered = true }) {
   return (
     <Suspense
       fallback={
-        <MyCenteredContainer>
-          <Spin size="large" />
-        </MyCenteredContainer>
+        spinnerCentered ? (
+          <MyCenteredContainer>
+            <Spin size="large" />
+          </MyCenteredContainer>
+        ) : (
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              paddingTop: 50,
+            }}
+          >
+            <Spin size="large" />
+          </div>
+        )
       }
     >
       {children}
diff --git a/src/Pages/Store/Website/Banner/index.js b/src/Pages/Store/Website/Banner/index.js
new file mode 100644
index 0000000..ce37ae0
--- /dev/null
+++ b/src/Pages/Store/Website/Banner/index.js
@@ -0,0 +1,3 @@
+export default function Banner() {
+  return <h1>Banner</h1>;
+}
diff --git a/src/Pages/Store/Website/ColorPalette/index.js b/src/Pages/Store/Website/ColorPalette/index.js
new file mode 100644
index 0000000..7c887a2
--- /dev/null
+++ b/src/Pages/Store/Website/ColorPalette/index.js
@@ -0,0 +1,3 @@
+export default function ColorPalette() {
+  return <h1>ColorPalette</h1>;
+}
diff --git a/src/Pages/Store/Website/General/index.js b/src/Pages/Store/Website/General/index.js
new file mode 100644
index 0000000..d5d68e4
--- /dev/null
+++ b/src/Pages/Store/Website/General/index.js
@@ -0,0 +1,3 @@
+export default function General() {
+  return <h1>General</h1>;
+}
diff --git a/src/Pages/Store/Website/index.js b/src/Pages/Store/Website/index.js
index b59f72d..0b023e4 100644
--- a/src/Pages/Store/Website/index.js
+++ b/src/Pages/Store/Website/index.js
@@ -1,9 +1,20 @@
-import { useEffect, useState } from "react";
+import { lazy, useEffect, useState } from "react";
 import { myFetch } from "../../../utils";
 import { useParams } from "react-router-dom";
 import MyCenteredContainer from "../../../Components/MyContainer";
 import { Button, Card, Result, Spin, Tabs } from "antd";
 import { useTranslation } from "react-i18next";
+import { MySupsenseFallback } from "../../../Components/MySupsenseFallback";
+
+const General = lazy(() => import("./General"));
+const Banner = lazy(() => import("./Banner"));
+const ColorPalette = lazy(() => import("./ColorPalette"));
+
+function SuspenseFallback({ children }) {
+  return (
+    <MySupsenseFallback spinnerCentered={false}>{children}</MySupsenseFallback>
+  );
+}
 
 export default function Website() {
   const { storeId } = useParams();
@@ -12,6 +23,78 @@ export default function Website() {
   const [isRequesting, setIsRequesting] = useState(true);
   const [website, setWebsite] = useState({});
 
+  const [activeTab, setActiveTab] = useState(0);
+
+  const tabItems = [
+    {
+      label: t("storeWebsite.tabs.general"),
+      children: <General />,
+    },
+    {
+      label: t("storeWebsite.tabs.banner"),
+      children: <Banner />,
+    },
+    {
+      label: t("storeWebsite.tabs.colorPalette"),
+      children: <ColorPalette />,
+    },
+  ].map((item, index) => {
+    return {
+      key: index,
+      ...item,
+      children: <SuspenseFallback>{item.children}</SuspenseFallback>,
+    };
+  });
+  /*
+  const tabItems = [
+    {
+      key: "1",
+      label: t("storeWebsite.tabs.general"),
+      children: (
+        <SuspenseFallback>
+          <General />
+        </SuspenseFallback>
+      ),
+    },
+    {
+      key: "2",
+      label: t("storeWebsite.tabs.banner"),
+      children: (
+        <SuspenseFallback>
+          <Banner />
+        </SuspenseFallback>
+      ),
+    },
+    {
+      key: "3",
+      label: t("storeWebsite.tabs.colorPalette"),
+      children: (
+        <SuspenseFallback>
+          <ColorPalette />
+        </SuspenseFallback>
+      ),
+    },
+    {
+      key: "4",
+      label: t("storeWebsite.tabs.zeitAdler"),
+      children: (
+        <SuspenseFallback>
+          <ColorPalette />
+        </SuspenseFallback>
+      ),
+    },
+    {
+      key: "4",
+      label: t("storeWebsite.tabs.zeitAdler"),
+      children: (
+        <SuspenseFallback>
+          <ColorPalette />
+        </SuspenseFallback>
+      ),
+    },
+  ];
+  */
+
   useEffect(() => {
     myFetch(`/website/${storeId}`, "GET")
       .then((res) => {
@@ -47,21 +130,10 @@ export default function Website() {
       <Card>
         <Tabs
           type="card"
-          items={[
-            "Allgemein",
-            "Banner",
-            "Color Scheme",
-            "Zeit Adler",
-            "Portfolio",
-            "Bewertungen",
-            "Footer / Socials",
-            "Impressum",
-            "Data Privacy",
-          ].map((item) => ({
-            label: item,
-            key: item,
-            content: <div>Test</div>,
-          }))}
+          defaultActiveKey={0}
+          items={tabItems}
+          activeKey={activeTab}
+          onChange={(key) => setActiveTab(key)}
         />
       </Card>
     </div>