feat: simple accordion

src/data/components/accordion.ts

@@ -0,0 +1,12 @@
+import { SubCategory } from '../types';
+
+export const accordion: SubCategory = {
+  name: 'Accordion',
+  id: 'accordion',
+  children: [
+    {
+      name: 'Simple Accordion',
+      filename: 'simpleAccordion',
+    },
+  ],
+};

src/data/index.tsx

@@ -20,6 +20,7 @@ import { multistep } from './templates/basic3StepForm';
 
 import { Category } from './types';
 import { imagesAndIcons } from './components/imagesAndIcons';
+import { accordion } from './components/accordion';
 
 export const data: Category[] = [
   {
@@ -59,6 +60,13 @@ export const data: Category[] = [
     name: 'Components',
     id: 'components',
     subLabel: 'Smaller buildings blocks like Cards, Buttons, Result ...',
-    children: [cards, buttons, socialButtons, result, imagesAndIcons],
+    children: [
+      cards,
+      buttons,
+      socialButtons,
+      result,
+      imagesAndIcons,
+      accordion,
+    ],
   },
 ];

src/pages/templates/components/accordion/simpleAccordion.tsx

@@ -0,0 +1,83 @@
+import {
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+  Flex,
+  useColorModeValue,
+  Text,
+  Container,
+} from '@chakra-ui/react';
+
+import { ChevronDownIcon } from '@chakra-ui/icons';
+
+export default function SimpleAccordion() {
+  return (
+    <Flex
+      minH={'100vh'}
+      align={'center'}
+      justify={'center'}
+      bg={useColorModeValue('gray.50', 'gray.800')}>
+      <Container>
+        <Accordion allowMultiple width="100%" maxW="lg" bg="white" rounded="lg">
+          <AccordionItem>
+            <AccordionButton
+              display="flex"
+              alignItems="center"
+              justifyContent="space-between"
+              p={4}
+              _hover={{ bg: 'gray.100' }}>
+              <Text fontSize="md">What is Chakra UI?</Text>
+              <ChevronDownIcon fontSize="24px" />
+            </AccordionButton>
+            <AccordionPanel pb={4}>
+              <Text>
+                Chakra UI is a simple and modular component library that gives
+                developers the building blocks they need to create web
+                applications.
+              </Text>
+            </AccordionPanel>
+          </AccordionItem>
+          <AccordionItem>
+            <AccordionButton
+              display="flex"
+              alignItems="center"
+              justifyContent="space-between"
+              p={4}
+              _hover={{ bg: 'gray.100' }}>
+              <Text fontSize="md">What advantages to use?</Text>
+              <ChevronDownIcon fontSize="24px" />
+            </AccordionButton>
+            <AccordionPanel pb={4}>
+              <Text>
+                Chakra UI offers a variety of advantages including ease of use,
+                accessibility, and customization options. It also provides a
+                comprehensive set of UI components and is fully compatible with
+                React.
+              </Text>
+            </AccordionPanel>
+          </AccordionItem>
+          <AccordionItem>
+            <AccordionButton
+              display="flex"
+              alignItems="center"
+              justifyContent="space-between"
+              p={4}
+              _hover={{ bg: 'gray.100' }}>
+              <Text fontSize="md">How to start using Chackra UI?</Text>
+              <ChevronDownIcon fontSize="24px" />
+            </AccordionButton>
+            <AccordionPanel pb={4}>
+              <Text>
+                To get started with Chakra UI, you can install it via npm or
+                yarn, and then import the components you need in your project.
+                The Chakra UI documentation is also a great resource for getting
+                started and learning more about the library.
+              </Text>
+            </AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+      </Container>
+    </Flex>
+  );
+}