LicenseAPI/Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Created the Help.jsx

Browse Source
This commit is contained in:
Mathias Wagner 2023-07-08 02:16:36 +02:00
parent 80168d7aaa
commit a2da755374
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44
1 changed files with 49 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/pages/Help/Help.jsx Normal file
View File

@ -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>
);
}