GuilhermeDeCamargoBarbosa/desafio-react-e-typescript-guilherme-de-camargo-barbosa
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: criando o accordion e fazendo alguns ajustes no css mobile

Browse Source
This commit is contained in:
Guilherme de Camargo Barbosa 2023-01-17 23:04:58 -03:00
parent 0d24cba399
commit 07f10481ec
15 changed files with 300 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -13,6 +13,7 @@
"formik": "^2.2.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-headless-accordion": "^1.0.2",
"react-router-dom": "^6.6.1",
"react-scripts": "5.0.1",
"typescript": "^4.9.4",

3
src/assets/IconMore.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.625 3.32031H7.79688V4.6875H4.625V8.28125H3.17188V4.6875H0V3.32031H3.17188V0H4.625V3.32031Z" fill="#303030"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 220 B

116
src/components/Footer/AccordionLinks/index.tsx Normal file
View File

@ -0,0 +1,116 @@
import {
Accordion,
AccordionBody,
AccordionHeader,
AccordionItem,
} from "react-headless-accordion";
import { Icon } from "../../Icon";
import { NavigationLinks } from "../../NavigationLinks";
import style from "./style.module.css";
export function AccordionLinks() {
const linksInfoInstitucional = [
{
slug: "quem-somos",
text: "Quem Somos",
},
{
slug: "politica-de-privacidade",
text: "Política de Privacidade",
},
{
slug: "seguranca",
text: "Segurança",
},
{
slug: "seja-um-Revendedor",
text: "Seja um Revendedor",
},
];
const linksInfoDoubts = [
{
slug: "entrega",
text: "Entrega",
},
{
slug: "pagamento",
text: "Pagamento",
},
{
slug: "trocas-e-devoluções",
text: "Trocas e Devoluções",
},
{
slug: "duvidas-frequentes",
text: "Dúvidas Frequentes",
},
];
const linksInfoContactUs = [
{
slug: "contato",
text: "Atendimento ao Consumidor",
},
{
slug: "contato",
text: "(11) 4159 9504",
},
{
slug: "whatsapp",
text: "Atendimento Online",
},
{
slug: "whatsapp",
text: "(11) 99433-8825",
},
];
return (
<div className={style.containerAccordion}>
<Accordion>
<AccordionItem>
<AccordionHeader className={style.titleAccordionContent}>
<h3>Institucional</h3>
<Icon name="iconMore" />
</AccordionHeader>
<AccordionBody className={style.bodyAccordionContent}>
<NavigationLinks links={linksInfoInstitucional} />
</AccordionBody>
</AccordionItem>
<AccordionItem>
<AccordionHeader className={style.titleAccordionContent}>
<h3 className={`accordion-title`}>Dúvidas</h3>
<Icon name="iconMore" />
</AccordionHeader>
<AccordionBody className={style.bodyAccordionContent}>
<NavigationLinks links={linksInfoDoubts} />
</AccordionBody>
</AccordionItem>
<AccordionItem>
<AccordionHeader className={style.titleAccordionContent}>
<h3 className={`accordion-title`}>Fale Conosco</h3>
<Icon name="iconMore" />
</AccordionHeader>
<AccordionBody className={style.bodyAccordionContent}>
<NavigationLinks links={linksInfoContactUs} />
</AccordionBody>
</AccordionItem>
</Accordion>
<div className={style.contentListIcons}>
<div className={style.contentListIconsWrapper}>
<div className={style.listIcons}>
<Icon name="facebook" />
<Icon name="instagram" />
<Icon name="twitter" />
<Icon name="youtube" />
<Icon name="linkedin" />
</div>
</div>
</div>
</div>
);
}

65
src/components/Footer/AccordionLinks/style.module.css Normal file
View File

@ -0,0 +1,65 @@
@media only screen and (max-width: 1024px) {
.containerAccordion {
width: 100%;
padding: 0.75rem 0;
}
.titleAccordionContent {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
background-color: transparent;
border: none;
font-family: "Roboto";
font-weight: 500;
font-size: 0.875rem;
}
.bodyAccordionContent {
padding: 0 1rem;
}
.bodyAccordionContent ul {
list-style: none;
}
.bodyAccordionContent a {
text-decoration: none;
}
.bodyAccordionContent a:last-child {
text-decoration: none;
text-decoration: underline;
text-decoration-color: var(--gray-1100);
}
.bodyAccordionContent li {
font-weight: 400;
font-size: 1.5rem;
color: var(--gray-1100);
margin-bottom: 0.75rem;
}
.contentListIconsWrapper {
padding: 0 1rem;
}
.listIcons {
display: flex;
gap: 0.659rem;
margin-bottom: 0.75rem;
}
.listIcons svg {
max-width: 35px;
}
}
@media only screen and (min-width: 1025px) {
.containerAccordion {
display: none;
}
}

14
src/components/Footer/ContainerFooter/style.module.css
View File

@ -1,6 +1,18 @@
@media only screen and (max-width: 1024px) {
.containerFooter {
display: none;
}
}
@media only screen and (min-width: 1025px) {
.containerFooter {
display: flex;
}
}
.containerFooter {
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;

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

@ -1,6 +1,7 @@
import { ContainerNewsletter } from "./ContainerNewsLetter";
import { ContainerFooter } from "./ContainerFooter";
import { ContainerFooterInfo } from "./ContainerFooterInfo";
import { AccordionLinks } from "./AccordionLinks";
export function Footer() {
@ -8,6 +9,7 @@ export function Footer() {
return (
<footer>
<ContainerNewsletter />
<AccordionLinks />
<ContainerFooter />
<ContainerFooterInfo />
</footer>

18
src/components/Icon/index.tsx
View File

@ -13,6 +13,7 @@ import iconM3 from "../../assets/icon-m3.svg";
interface IconProps {
name:
| "search"
| "iconMore"
| "bars"
| "exit"
| "miniCart"
@ -43,6 +44,21 @@ export function Icon(props: IconProps) {
const { name } = props;
switch (name) {
case "iconMore":
return (
<svg
width="8"
height="9"
viewBox="0 0 8 9"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.625 3.32031H7.79688V4.6875H4.625V8.28125H3.17188V4.6875H0V3.32031H3.17188V0H4.625V3.32031Z"
fill="#303030"
/>
</svg>
);
case "exit":
return (
<svg
@ -62,7 +78,7 @@ export function Icon(props: IconProps) {
/>
</svg>
);
case "bars":
return (
<svg

10
src/components/Main/style.module.css
View File

@ -19,7 +19,7 @@
width: 100%;
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 1fr 3fr;
grid-template-rows: auto auto;
grid-template-areas: "title title"
"aside contentInfo";
}
@ -57,6 +57,10 @@
}
@media only screen and (max-width: 1024px) {
.contentMain h1 {
margin: 5rem 0 2.5rem 0;
}
.contentWrapper {
width: 100%;
padding: 0 1rem;
@ -66,7 +70,7 @@
width: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 3fr;
grid-template-rows: auto auto auto;
grid-template-areas:
"title"
"aside"
@ -81,4 +85,4 @@
grid-area: aside;
border-right: none;
}
}
}

17
src/pages/Contato/style.module.css
View File

@ -3,12 +3,6 @@
margin-left: 1.875rem;
}
@media only screen and (max-width: 1024px) {
.contentInfoList {
grid-area: contentInfo;
}
}
.contentInfoList h2 {
margin: 0.75rem 0;
font-weight: 700;
@ -128,4 +122,15 @@
.contentCheckbox span {
color: var(--red);
font-size: 24px;
}
@media only screen and (max-width: 1024px) {
.contentInfoList {
grid-area: contentInfo;
}
.contentInfoList h2{
text-align: center;
margin-top: 1.875rem;
}
}

19
src/pages/Entrega/style.module.css
View File

@ -3,12 +3,6 @@
margin-left: 1.875rem;
}
@media only screen and (max-width: 1024px) {
.contentInfoList {
grid-area: contentInfo;
}
}
.contentInfoList h2 {
margin: 0.75rem 0;
font-weight: 700;
@ -21,4 +15,15 @@
font-weight: 400;
line-height: 30.47px;
font-size: 26px;
}
}
@media only screen and (max-width: 1024px) {
.contentInfoList {
grid-area: contentInfo;
}
.contentInfoList h2{
text-align: center;
margin-top: 1.875rem;
}
}

19
src/pages/FormaPagamento/style.module.css
View File

@ -3,12 +3,6 @@
margin-left: 1.875rem;
}
@media only screen and (max-width: 1024px) {
.contentInfoList {
grid-area: contentInfo;
}
}
.contentInfoList h2 {
margin: 0.75rem 0;
font-weight: 700;
@ -21,4 +15,15 @@
font-weight: 400;
line-height: 30.47px;
font-size: 26px;
}
}
@media only screen and (max-width: 1024px) {
.contentInfoList {
grid-area: contentInfo;
}
.contentInfoList h2{
text-align: center;
margin-top: 1.875rem;
}
}

19
src/pages/SegurancaPrivacidade/style.module.css
View File

@ -3,12 +3,6 @@
margin-left: 1.875rem;
}
@media only screen and (max-width: 1024px) {
.contentInfoList {
grid-area: contentInfo;
}
}
.contentInfoList h2 {
margin: 0.75rem 0;
font-weight: 700;
@ -21,4 +15,15 @@
font-weight: 400;
line-height: 30.47px;
font-size: 26px;
}
}
@media only screen and (max-width: 1024px) {
.contentInfoList {
grid-area: contentInfo;
}
.contentInfoList h2{
text-align: center;
margin-top: 1.875rem;
}
}

19
src/pages/Sobre/style.module.css
View File

@ -3,12 +3,6 @@
margin-left: 1.875rem;
}
@media only screen and (max-width: 1024px) {
.contentInfoList {
grid-area: contentInfo;
}
}
.contentInfoList h2 {
margin: 0.75rem 0;
font-weight: 700;
@ -22,4 +16,15 @@
line-height: 30.47px;
font-size: 26px;
margin-bottom: 1.87rem;
}
}
@media only screen and (max-width: 1024px) {
.contentInfoList {
grid-area: contentInfo;
}
.contentInfoList h2{
text-align: center;
margin-top: 1.875rem;
}
}

19
src/pages/TrocaDevolucao/style.module.css
View File

@ -3,12 +3,6 @@
margin-left: 1.875rem;
}
@media only screen and (max-width: 1024px) {
.contentInfoList {
grid-area: contentInfo;
}
}
.contentInfoList h2 {
margin: 0.75rem 0;
font-weight: 700;
@ -21,4 +15,15 @@
font-weight: 400;
line-height: 30.47px;
font-size: 26px;
}
}
@media only screen and (max-width: 1024px) {
.contentInfoList {
grid-area: contentInfo;
}
.contentInfoList h2{
text-align: center;
margin-top: 1.875rem;
}
}

5
yarn.lock
View File

@ -7376,6 +7376,11 @@ react-fast-compare@^2.0.1:
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
react-headless-accordion@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz#df45168fc379a9014bd7becc2f4be100af456b6e"
integrity sha512-wKBTB/+aAr9MGX5RYi3sdmKOSzevKdmbGRw9JTe7XONiHlTo+pC1OiggL9NUxp5QeQcTnX0rryhuySeGsqBfBg==
react-is@^16.13.1, react-is@^16.7.0:
version "16.13.1"
resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"