From 03a52eff11a52af24b6a46f2b4774b22426a707d Mon Sep 17 00:00:00 2001
From: Emmanuel Vitor <emmanuelvitor.ti@gmail.com>
Date: Thu, 12 Jan 2023 20:41:58 -0300
Subject: [PATCH] feat: cria componente accordion  do footer

---
 .../Footer/Accordion/AccordionElement.tsx     |  15 +++
 .../Footer/Accordion/AccordionFooter.tsx      | 119 ++++++++++++++++++
 .../Accordion/styles/Accordion.module.scss    |  91 ++++++++++++++
 src/pages/Home.tsx                            |   2 +
 4 files changed, 227 insertions(+)
 create mode 100644 src/components/Footer/Accordion/AccordionElement.tsx
 create mode 100644 src/components/Footer/Accordion/AccordionFooter.tsx
 create mode 100644 src/components/Footer/Accordion/styles/Accordion.module.scss

diff --git a/src/components/Footer/Accordion/AccordionElement.tsx b/src/components/Footer/Accordion/AccordionElement.tsx
new file mode 100644
index 0000000..b591a12
--- /dev/null
+++ b/src/components/Footer/Accordion/AccordionElement.tsx
@@ -0,0 +1,15 @@
+import React, { ReactNode } from "react";
+
+interface AccordionProps {
+    children: ReactNode
+}
+
+{/* Recebe List Items como filho */ }
+export const AccordionElement = ({ children }: AccordionProps) => {
+    return (
+        <>
+            {children}
+        </>
+
+    );
+}
diff --git a/src/components/Footer/Accordion/AccordionFooter.tsx b/src/components/Footer/Accordion/AccordionFooter.tsx
new file mode 100644
index 0000000..101c7b2
--- /dev/null
+++ b/src/components/Footer/Accordion/AccordionFooter.tsx
@@ -0,0 +1,119 @@
+import React, { useState } from "react";
+import styleAccordion from "./styles/Accordion.module.scss";
+
+import { ListItem } from "../../utils/ListItem";
+import { AccordionElement } from "./AccordionElement";
+import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from "react-headless-accordion";
+
+
+export const AccordionFooter = () => {
+
+    return (
+        <Accordion className={styleAccordion["accordion"]}
+        >
+            <AccordionItem >
+                <div>
+                    <AccordionHeader
+                        as={"div"}
+                        className={styleAccordion["toggle__accordion"]}>
+                        <span >
+                            <h5>Intitucional</h5>
+                        </span>
+                        <span className={styleAccordion["icon__plus"]}>+</span>
+
+                    </AccordionHeader>
+
+                    <AccordionBody className={styleAccordion["accordion__body"]}>
+                        <ListItem
+                            link={"/"}
+                            title={"Quem Somos"} />
+                        <ListItem
+                            link={"/"}
+                            title={"Política de Privacidade"}
+                        />
+                        <ListItem
+                            link={"/"}
+                            title={"Segurança"}
+                        />
+                        <ListItem
+                            link={"/"}
+                            title={"Seja um Revendedor"}
+                        />
+                    </AccordionBody>
+                </div>
+
+            </AccordionItem>
+
+            <AccordionItem >
+                <div>
+                    <AccordionHeader
+                        as={"div"}
+                        className={styleAccordion["toggle__accordion"]}>
+                        <span>
+                            <h5 >Duvidas</h5>
+                        </span>
+                        <span className={styleAccordion["icon__plus"]}>+</span>
+                    </AccordionHeader>
+                    <AccordionBody className={styleAccordion["accordion__body"]}>
+                        <div className="accordion-body">
+                            <AccordionElement>
+                                <ListItem
+                                    link={"/"}
+                                    title={"Entrega"}
+                                />
+                                <ListItem
+                                    link={"/"}
+                                    title={"Pagamento"}
+                                />
+                                <ListItem
+                                    link={"/"}
+                                    title={"Trocas e Devoluções"}
+                                />
+                                <ListItem
+                                    link={"/"}
+                                    title={"Dúvidas Frequentes"}
+                                />
+                            </AccordionElement>
+                        </div>
+                    </AccordionBody>
+                </div>
+            </AccordionItem>
+
+            <AccordionItem>
+                <div>
+                    <AccordionHeader
+                        as={"div"}
+                        className={styleAccordion["toggle__accordion"]}
+                    >
+                        <span>
+                            <h5>Fale Conosco</h5>
+                        </span>
+                        <span className={styleAccordion["icon__plus"]}>+</span>
+                    </AccordionHeader>
+
+                    <AccordionBody className={`${styleAccordion["accordion__body"]} ${styleAccordion.desk}`}>
+                        <AccordionElement>
+
+                            <span className={styleAccordion["contact__us"]}>
+                                <ListItem title={"Atendimento ao Consumidor"} />
+                            </span>
+                            <ListItem
+                                title={"(11) 4159-9504"}
+                            />
+                            <span className={styleAccordion["contact__us"]}>
+                                <ListItem title={"Atendimento Online"} />
+                            </span>
+                            <ListItem
+                                title={"(11) 99433-8825"}
+                            />
+                        </AccordionElement>
+                    </AccordionBody>
+                </div>
+            </AccordionItem>
+        </Accordion >
+    );
+
+
+}
+
+
diff --git a/src/components/Footer/Accordion/styles/Accordion.module.scss b/src/components/Footer/Accordion/styles/Accordion.module.scss
new file mode 100644
index 0000000..70df377
--- /dev/null
+++ b/src/components/Footer/Accordion/styles/Accordion.module.scss
@@ -0,0 +1,91 @@
+.accordion {
+    padding: 0 16px;
+    display: flex;
+    justify-content: space-between;
+
+    @media (max-width:1024px) {
+        flex-direction: column;
+    }
+}
+
+.toggle__accordion {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+
+    .icon__plus {
+
+        @media (min-width:1025px) {
+            display: none;
+        }
+    }
+
+    span {
+        h5 {
+            font-family: 'Roboto';
+            font-style: normal;
+            font-weight: 500;
+            font-size: 14px;
+            line-height: 16px;
+
+            text-transform: uppercase;
+
+            color: #303030;
+
+            @media (min-width:2500px) {
+                font-size: 28px;
+                line-height: 33px;
+            }
+        }
+    }
+}
+
+.accordion__body {
+    display: flex;
+    flex-direction: column;
+    row-gap: 12px;
+
+    @media (min-width:1025px) {
+        overflow: visible !important;
+    }
+
+    li {
+        a {
+            font-family: 'Roboto';
+            font-style: normal;
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 14px;
+            text-transform: capitalize;
+
+            color: #303030;
+
+            @media (min-width:2500px) {
+                font-size: 24px;
+                line-height: 28px;
+            }
+
+        }
+    }
+
+    .contact__us {
+        max-width: 155px;
+
+        @media (min-width:2500px) {
+            max-width: none;
+        }
+
+        li {
+            a {
+                font-weight: 500;
+
+                @media (min-width:2500px) {
+                    font-size: 24px;
+                    line-height: 28px;
+                }
+            }
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 7b534dd..7158afa 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { AccordionFooter } from "../components/Footer/Accordion/AccordionFooter";
 import { Rodape } from "../components/Footer/Rodape/Rodape";
 import { SocialMedia } from "../components/Footer/SocialMedia/SocialMedia";
 import { Header } from "../components/Header/Header";
@@ -9,6 +10,7 @@ export const Home = () => {
     return (
         <>
             <Header />
+            <AccordionFooter />
             <SocialMedia />
             <NewsLetter />
             <Rodape />