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