forked from M3-Academy/desafio-react-e-typescript
Merge pull request 'feat: cria componente accordion do footer' (#6) from feature/footerAccordion into development
Reviewed-on: #6
This commit is contained in:
commit
d842468f5a
15
src/components/Footer/Accordion/AccordionElement.tsx
Normal file
15
src/components/Footer/Accordion/AccordionElement.tsx
Normal 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
119
src/components/Footer/Accordion/AccordionFooter.tsx
Normal 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
91
src/components/Footer/Accordion/styles/Accordion.module.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
@ -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 />
|
||||
|
Loading…
Reference in New Issue
Block a user