emmanuelvitor/desafio-react-e-typescript-emmanuelvitor
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: cria componente accordion do footer

Browse Source
This commit is contained in:
Emmanuel Vitor Pereira de Jesus 2023-01-12 20:41:58 -03:00
parent bb5a19c798
commit 03a52eff11
4 changed files with 227 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Footer/Accordion/AccordionElement.tsx Normal file
View File

@ -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}
</>
);
}

119
src/components/Footer/Accordion/AccordionFooter.tsx Normal file
View File

@ -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 >
);
}

91
src/components/Footer/Accordion/styles/Accordion.module.scss Normal file
View File

@ -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;
}
}
}
}
}

2
src/pages/Home.tsx
View File

@ -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 />