From c61bff95e90df96264955ba5a76ea8af29d08e91 Mon Sep 17 00:00:00 2001
From: Fernando Unger <fdasilvaunger@gmail.com>
Date: Sun, 26 Mar 2023 17:01:00 -0300
Subject: [PATCH 1/2] feat: simple accordion

---
 src/data/components/accordion.ts              | 12 +++
 src/data/index.tsx                            | 10 ++-
 .../components/accordion/simpleAccordion.tsx  | 83 +++++++++++++++++++
 3 files changed, 104 insertions(+), 1 deletion(-)
 create mode 100644 src/data/components/accordion.ts
 create mode 100644 src/pages/templates/components/accordion/simpleAccordion.tsx

diff --git a/src/data/components/accordion.ts b/src/data/components/accordion.ts
new file mode 100644
index 0000000..0f5dece
--- /dev/null
+++ b/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',
+    },
+  ],
+};
diff --git a/src/data/index.tsx b/src/data/index.tsx
index 946eb9d..cb30aec 100644
--- a/src/data/index.tsx
+++ b/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,
+    ],
   },
 ];
diff --git a/src/pages/templates/components/accordion/simpleAccordion.tsx b/src/pages/templates/components/accordion/simpleAccordion.tsx
new file mode 100644
index 0000000..09f9003
--- /dev/null
+++ b/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>
+  );
+}

From 598d002cfb4f2618db55ef90e934a050d5697ac3 Mon Sep 17 00:00:00 2001
From: Fernando Unger <87918106+fernandounger@users.noreply.github.com>
Date: Sun, 26 Mar 2023 17:49:09 -0300
Subject: [PATCH 2/2] style: correcting typo

---
 src/pages/templates/components/accordion/simpleAccordion.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/templates/components/accordion/simpleAccordion.tsx b/src/pages/templates/components/accordion/simpleAccordion.tsx
index 09f9003..94d9b61 100644
--- a/src/pages/templates/components/accordion/simpleAccordion.tsx
+++ b/src/pages/templates/components/accordion/simpleAccordion.tsx
@@ -64,7 +64,7 @@ export default function SimpleAccordion() {
               justifyContent="space-between"
               p={4}
               _hover={{ bg: 'gray.100' }}>
-              <Text fontSize="md">How to start using Chackra UI?</Text>
+              <Text fontSize="md">How to start using Chakra UI?</Text>
               <ChevronDownIcon fontSize="24px" />
             </AccordionButton>
             <AccordionPanel pb={4}>