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

fix: corrige organização das pastas do footer e componente do Accordion

Browse Source
This commit is contained in:
Emmanuel Vitor Pereira de Jesus 2023-01-13 13:20:56 -03:00
parent 03a52eff11
commit 19ab40f4aa
12 changed files with 273 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
src/components/Footer/Accordion/AccordionFooter.tsx
View File

@ -3,117 +3,39 @@ 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";
import {
Accordion,
} from "react-headless-accordion";
import { AccordionItem } from "./AccordionItem"
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>
<Accordion className={styleAccordion["accordion"]}>
<AccordionItem title="Institucional">
<ListItem link={"/"} title={"Quem Somos"} />
<ListItem link={"/"} title={"Política de Privacidade"} />
<ListItem link={"/"} title={"Segurança"} />
<ListItem link={"/"} title={"Seja um Revendedor"} />
</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 title="Duvidas">
<ListItem link={"/"} title={"Entrega"} />
<ListItem link={"/"} title={"Pagamento"} />
<ListItem link={"/"} title={"Trocas e Devoluções"} />
<ListItem link={"/"} title={"Dúvidas Frequentes"} />
</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 title="Fale Conosco">
<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"} />
</AccordionItem>
</Accordion >
</Accordion>
);
}
};

40
src/components/Footer/Accordion/AccordionItem.tsx Normal file
View File

@ -0,0 +1,40 @@
import { useState, ReactElement } from "react"
import {
AccordionBody,
AccordionHeader,
AccordionItem as HAccordionItem,
} from "react-headless-accordion";
import styleAccordion from "./styles/Accordion.module.scss";
interface AccordionItemFooterProps {
title: string
children: ReactElement | ReactElement[]
}
export const AccordionItem = ({ children, title }: AccordionItemFooterProps) => {
const [isOpen, setIsOpen] = useState(false)
return (
<HAccordionItem>
<div>
<AccordionHeader
as={"div"}
className={isOpen
? `${styleAccordion["toggle__accordion"]} ${styleAccordion["icon__minus"]}`
: `${styleAccordion["toggle__accordion"]} ${styleAccordion["icon__plus"]}`}
onClick={() => setIsOpen((prevState) => !prevState)}
>
<span>
<h5>{title}</h5>
</span>
</AccordionHeader>
<AccordionBody className={styleAccordion["accordion__body"]}>
{children}
</AccordionBody>
</div>
</HAccordionItem>
)
}

116
src/components/Footer/Accordion/styles/Accordion.module.scss
View File

@ -1,10 +1,41 @@
h5 {
margin: 0;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16.41px;
text-transform: uppercase;
color: #303030;
@media (min-width:2500px) {
font-size: 28px;
line-height: 33px;
}
}
.accordion {
padding: 0 16px;
display: flex;
justify-content: space-between;
width: 100%;
max-width: 707px;
height: 139px;
@media (min-width:250px) {
max-width: 1531px;
}
@media (max-width:1024px) {
flex-direction: column;
width: 96.875%;
max-width: 992px;
justify-content: initial;
height: auto;
}
}
@ -14,37 +45,49 @@
align-items: center;
width: 100%;
.icon__plus {
@media (min-width:1025px) {
display: none;
}
}
.icon__minus {
&::after {
content: "-";
}
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;
}
@media (min-width:1025px) {
&::after {
content: " "
}
}
}
.icon__plus {
&::after {
content: "+";
}
@media (min-width:1025px) {
&::after {
content: " "
}
}
}
.accordion__body {
display: flex;
flex-direction: column;
row-gap: 12px;
max-height: 140px;
margin-top: 12px;
gap: 6px;
height: 125px;
@media (min-width:1025px) {
overflow: visible !important;
@ -69,23 +112,28 @@
}
}
.contact__us {
max-width: 155px;
}
@media (min-width:2500px) {
max-width: none;
}
.contact__us {
max-width: 155px;
li {
a {
font-weight: 500;
font-size: 12px;
line-height: 14px;
@media (min-width:2500px) {
font-size: 24px;
line-height: 28px;
}
@media (min-width:2500px),
(max-width:1024px) {
max-width: none;
}
li {
a {
font-weight: 500;
@media (min-width:2500px) {
font-size: 24px;
line-height: 28px;
}
}
}
}

20
src/components/Footer/Footer.tsx Normal file
View File

@ -0,0 +1,20 @@
import React from "react";
import { NewsLetter } from "./NewsLetter/NewsLetter";
import { AccordionFooter } from "./Accordion/AccordionFooter";
import { Rodape } from "./Rodape/Rodape";
import { SocialMedia } from "./SocialMedia/SocialMedia";
import styleFooter from "./styles/Footer.module.scss";
export const Footer = () => {
return (
<div className={styleFooter["footer"]}>
<NewsLetter />
<div className={styleFooter["footer__middle"]}>
<AccordionFooter />
<SocialMedia />
</div>
<Rodape />
</div >
);
}

0
src/components/NewsLetter/NewsLetter.tsx → src/components/Footer/NewsLetter/NewsLetter.tsx
View File

78
src/components/NewsLetter/Newsletter.module.scss → src/components/Footer/NewsLetter/Newsletter.module.scss
View File

@ -1,28 +1,30 @@
.newsLetter {
width: 100%;
padding: 16px 0;
border: 1px solid;
&__wrapper {
display: flex;
flex-direction: column;
width: 37.03125%;
margin: 0 auto;
@media (max-width:1024px) {
row-gap: 16px;
margin: 0 16px;
width: 96.875%;
margin: 0 16px;
width: 96.875%;
}
@media (max-width:768px) {
width: 94%;
}
}
@media (max-width:490px) {
width: 90.4%;
}
width: 91.42%;
}
.newsLetter__title {
font-family: 'Roboto';
@ -44,10 +46,11 @@
font-size: 36px;
line-height: 42px;
}
@media (max-width:1024px) {
font-size: 14px;
line-height: 16px;
}
}
}
.newsLetter__form {
@ -56,28 +59,30 @@
align-items: center;
justify-content: space-between;
column-gap: 10px;
@media (max-width:1024px) {
row-gap: 16px;
flex-direction: column;
}
flex-direction: column;
}
&__input {
&__input{
width: 100%;
max-width: 340px;
height: 42px;
border-radius: 4px;
border: 1px solid #E5E5E5;
outline: none;
padding: 0 16px;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #C4C4C4;
&::placeholder{
color: #C4C4C4;
&::placeholder {
color: #C4C4C4;
}
@media (min-width:2500px) {
@ -86,22 +91,26 @@
font-size: 28px;
line-height: 33px;
}
@media (max-width:1024px) {
max-width: 96.875% ;
}
@media (max-width:768px) {
max-width: 96.875%;
}
@media (max-width:768px) {
width: 94.875%;
}
@media (max-width:512px) {
}
@media (max-width:512px) {
width: 91.875%;
}
@media (max-width:490px) {
}
@media (max-width:490px) {
width: 90.4%;
}
}
}
&__submit {
@ -137,10 +146,11 @@
font-size: 24px;
line-height: 28px;
}
@media (max-width:1024px) {
max-width: none ;
}
max-width: none;
}
}
}
}

27
src/components/Footer/SocialMedia/SocialMedia.module.scss
View File

@ -1,17 +1,22 @@
.wrapper {
@media (max-width:1025px) {
padding: 0 16px;
}
&__social__media {
display: flex;
column-gap: 10px;
width: 100%;
max-width: 215px;
padding: 0;
@media (min-width: 2500px) {
max-width: 390px;
}
li {
a {
img {
width: 35px;
@ -26,4 +31,24 @@
}
}
.link__site {
a {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #303030;
text-transform: lowercase;
@media (min-width:2500px) {
font-size: 28x;
line-height: 33px;
}
}
}
}

2
src/components/Footer/SocialMedia/SocialMedia.tsx
View File

@ -36,7 +36,7 @@ export const SocialMedia = () => {
altText="Logo da rede social "
/>
</div >
<div>
<div className={styleSocialMedia["link__site"]} >
<a href="www.loremipsum.com">
www.loremipsum.com
</a>

0
src/components/Footer/styles/Accordion.module.scss
View File

28
src/components/Footer/styles/Footer.module.scss
View File

@ -0,0 +1,28 @@
.footer {
width: 100%;
&__middle {
display: flex;
justify-content: space-evenly;
height: 139px;
padding: 50px 0;
@media (min-width:2500px) {
height: 239px;
}
@media (max-width: 1024px) {
flex-direction: column;
width: 96.875%;
max-width: 992px;
justify-content: initial;
padding: 24px 0;
height: auto;
}
@media (max-width:768px) {
width: 94%;
}
}
}

2
src/index.css
View File

@ -6,7 +6,7 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: gray;
/* background-color: gray; */
}
code {

11
src/pages/Home.tsx
View File

@ -1,19 +1,16 @@
import React from "react";
import { AccordionFooter } from "../components/Footer/Accordion/AccordionFooter";
import { Footer } from "../components/Footer/Footer";
import { Rodape } from "../components/Footer/Rodape/Rodape";
import { SocialMedia } from "../components/Footer/SocialMedia/SocialMedia";
import { Header } from "../components/Header/Header";
import { NewsLetter } from "../components/NewsLetter/NewsLetter";
export const Home = () => {
return (
<>
<Header />
<AccordionFooter />
<SocialMedia />
<NewsLetter />
<Rodape />
<Footer />
</>
)
}