From a2da7553748c1cfe069ae37fee5a649f51acdbb7 Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Sat, 8 Jul 2023 02:16:36 +0200
Subject: [PATCH] Created the Help.jsx

---
 src/pages/Help/Help.jsx | 49 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 src/pages/Help/Help.jsx

diff --git a/src/pages/Help/Help.jsx b/src/pages/Help/Help.jsx
new file mode 100644
index 0000000..d45b73f
--- /dev/null
+++ b/src/pages/Help/Help.jsx
@@ -0,0 +1,49 @@
+import {Stack, Tab, Tabs, Typography, useMediaQuery, useTheme} from "@mui/material";
+import HelpImage from "@/common/assets/images/help/help.svg";
+import {useState} from "react";
+import Question from "@/pages/Help/components/Question";
+
+export const Help = () => {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("lg"));
+
+    const [currentTab, setCurrentTab] = useState(0);
+
+    return (
+        <Stack direction="column" justifyContent="center" sx={{mt: 15, ml: "auto", mr: "auto", width: "60%"}}>
+            <Stack direction="row" justifyContent="space-between">
+                <Stack direction="column" justifyContent="center" sx={{width: "33rem"}}>
+                    <Typography variant="h3" fontWeight={700} color="black">Sie benötigen Hilfe?</Typography>
+                    <Typography variant="h5" fontWeight={500} color="black">Entdecken Sie viele hilfreiche Ressourcen,
+                        die Ihnen beim Einstieg helfen.</Typography>
+                </Stack>
+
+                {!isMobile && <img src={HelpImage} alt="Help"/>}
+            </Stack>
+
+            <Tabs value={currentTab} sx={{mt: 10}} onChange={(event, newValue) => setCurrentTab(newValue)}
+                  variant="scrollable" scrollButtons="auto" allowScrollButtonsMobile>
+                <Tab label="Lizenzierung" disableRipple/>
+                <Tab label="Gruppen" disableRipple/>
+                <Tab label="Schnittstelle" disableRipple/>
+                <Tab label="Integration" disableRipple/>
+                <Tab label="Metadaten" disableRipple/>
+            </Tabs>
+
+            <Stack sx={{mt: 5}} gap={2.5}>
+                {currentTab === 0 && <>
+                    <Question question="Wie erstelle ich meine erste Lizenz"
+                              answer="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, diam quis" />
+                    <Question question="Wie erstelle ich meine erste Lizenz"
+                              answer="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, diam quis" />
+                </>}
+                {currentTab === 1 && <>
+                    <Question question="Wie lösche ich eine Gruppe"
+                                answer="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, diam quis" />
+                    <Question question="Wie erstelle ich eine Gruppe"
+                                answer="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, diam quis" />
+                </>}
+            </Stack>
+        </Stack>
+    );
+}
\ No newline at end of file