Function FAQ

src/Components/FAQ/FAQ.jsx:257–299

()

}

export default function FAQ() {
    const [tab, setTab] = useState(0);
    return (
        <Paper
            elevation={0}
            sx={{
                bgcolor: (theme) => theme.palette.background.default,
                overflowY: "auto",
                width: "100%",
                display: "flex",
                justifyContent: "center",
            }}
        >
            <Box sx={{width: "100%", maxWidth: 980, px: {xs: 2, sm: 3}, py: 3}}>
                <Typography variant="h4" sx={{fontWeight: 600, mb: 0.5}}>帮助中心</Typography>
                <Typography sx={{color: "text.secondary", mb: 2}}>常见问题、名词缩写、关于我们与用户协议</Typography>
                <Tabs
                    value={tab}
                    onChange={(_, v) => setTab(v)}
                    sx={{mb: 3, borderBottom: "1px solid", borderColor: "divider", "& .MuiTab-root": {textTransform: "none", fontSize: 15}}}
                >
                    <Tab label="常见问题"/>
                    <Tab label="名词缩写"/>
                    <Tab label="关于我们"/>
                    <Tab label="用户协议"/>
                </Tabs>

                {tab === 0 && (
                    <Box>
                        {faqItems.map((item) => (
                            <FaqAccordion key={item.question} question={item.question}>
                                {item.answer}
                            </FaqAccordion>
                        ))}
                    </Box>
                )}
                {tab === 1 && <GlossaryPanel/>}
                {tab === 2 && <AboutUs sx={{width: "100%", p: 0}}/>}
                {tab === 3 && <Box sx={{color: "text.secondary"}}><AgreementContent/></Box>}
            </Box>
        </Paper>
    );
}