79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
|
import {
|
||
|
|
Accordion,
|
||
|
|
AccordionButton,
|
||
|
|
AccordionIcon,
|
||
|
|
AccordionItem,
|
||
|
|
AccordionPanel,
|
||
|
|
Heading,
|
||
|
|
HStack,
|
||
|
|
Stack,
|
||
|
|
} from '@chakra-ui/react'
|
||
|
|
import { ChatIcon, CodeIcon, LayoutIcon } from 'assets/icons'
|
||
|
|
import React from 'react'
|
||
|
|
import { GeneralContent } from './GeneralContent'
|
||
|
|
|
||
|
|
export const SideMenu = () => {
|
||
|
|
return (
|
||
|
|
<Stack flex="1" maxW="400px" borderRightWidth={1} pt={10} spacing={10}>
|
||
|
|
<Heading fontSize="xl" textAlign="center">
|
||
|
|
Customize the theme
|
||
|
|
</Heading>
|
||
|
|
<Accordion allowMultiple allowToggle>
|
||
|
|
<GeneralContent />
|
||
|
|
|
||
|
|
<AccordionItem>
|
||
|
|
<AccordionButton py={6}>
|
||
|
|
<HStack flex="1" pl={2}>
|
||
|
|
<LayoutIcon />
|
||
|
|
<Heading fontSize="lg" color="gray.700">
|
||
|
|
Layout
|
||
|
|
</Heading>
|
||
|
|
</HStack>
|
||
|
|
<AccordionIcon />
|
||
|
|
</AccordionButton>
|
||
|
|
<AccordionPanel pb={4}>
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
|
||
|
|
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||
|
|
aliquip ex ea commodo consequat.
|
||
|
|
</AccordionPanel>
|
||
|
|
</AccordionItem>
|
||
|
|
<AccordionItem>
|
||
|
|
<AccordionButton py={6}>
|
||
|
|
<HStack flex="1" pl={2}>
|
||
|
|
<ChatIcon />
|
||
|
|
<Heading fontSize="lg" color="gray.700">
|
||
|
|
Chat
|
||
|
|
</Heading>
|
||
|
|
</HStack>
|
||
|
|
<AccordionIcon />
|
||
|
|
</AccordionButton>
|
||
|
|
<AccordionPanel pb={4}>
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
|
||
|
|
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||
|
|
aliquip ex ea commodo consequat.
|
||
|
|
</AccordionPanel>
|
||
|
|
</AccordionItem>
|
||
|
|
<AccordionItem>
|
||
|
|
<AccordionButton py={6}>
|
||
|
|
<HStack flex="1" pl={2}>
|
||
|
|
<CodeIcon />
|
||
|
|
<Heading fontSize="lg" color="gray.700">
|
||
|
|
Custom CSS
|
||
|
|
</Heading>
|
||
|
|
</HStack>
|
||
|
|
<AccordionIcon />
|
||
|
|
</AccordionButton>
|
||
|
|
<AccordionPanel pb={4}>
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
|
||
|
|
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||
|
|
aliquip ex ea commodo consequat.
|
||
|
|
</AccordionPanel>
|
||
|
|
</AccordionItem>
|
||
|
|
</Accordion>
|
||
|
|
</Stack>
|
||
|
|
)
|
||
|
|
}
|