website

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"
     }
   }
 }

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"
     }
   }
 }

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={
+        spinnerCentered ? (
           <MyCenteredContainer>
             <Spin size="large" />
           </MyCenteredContainer>
+        ) : (
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              paddingTop: 50,
+            }}
+          >
+            <Spin size="large" />
+          </div>
+        )
       }
     >
       {children}

src/Pages/Store/Website/Banner/index.js

@@ -0,0 +1,3 @@
+export default function Banner() {
+  return <h1>Banner</h1>;
+}

src/Pages/Store/Website/ColorPalette/index.js

@@ -0,0 +1,3 @@
+export default function ColorPalette() {
+  return <h1>ColorPalette</h1>;
+}

src/Pages/Store/Website/General/index.js

@@ -0,0 +1,3 @@
+export default function General() {
+  return <h1>General</h1>;
+}

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={[
+          defaultActiveKey={0}
-            "Allgemein",
+          items={tabItems}
-            "Banner",
+          activeKey={activeTab}
-            "Color Scheme",
+          onChange={(key) => setActiveTab(key)}
-            "Zeit Adler",
-            "Portfolio",
-            "Bewertungen",
-            "Footer / Socials",
-            "Impressum",
-            "Data Privacy",
-          ].map((item) => ({
-            label: item,
-            key: item,
-            content: <div>Test</div>,
-          }))}
         />
       </Card>
     </div>