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

feat: Adiciona newsletter mobile

Browse Source
This commit is contained in:
Cainã Milech 2023-01-09 13:25:45 -03:00
parent 82dd37d756
commit defaa70cfc
7 changed files with 172 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
react-project/package-lock.json generated
View File

@ -19,6 +19,7 @@
"node-sass": "^7.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-headless-accordion": "^1.0.2",
"react-input-mask": "^2.0.4",
"react-modal": "^3.16.1",
"react-router-dom": "^6.6.1",
@ -15097,6 +15098,14 @@
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
},
"node_modules/react-headless-accordion": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz",
"integrity": "sha512-wKBTB/+aAr9MGX5RYi3sdmKOSzevKdmbGRw9JTe7XONiHlTo+pC1OiggL9NUxp5QeQcTnX0rryhuySeGsqBfBg==",
"peerDependencies": {
"react": "^18.2.0"
}
},
"node_modules/react-input-mask": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",
@ -29284,6 +29293,12 @@
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
},
"react-headless-accordion": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz",
"integrity": "sha512-wKBTB/+aAr9MGX5RYi3sdmKOSzevKdmbGRw9JTe7XONiHlTo+pC1OiggL9NUxp5QeQcTnX0rryhuySeGsqBfBg==",
"requires": {}
},
"react-input-mask": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",

1
react-project/package.json
View File

@ -14,6 +14,7 @@
"node-sass": "^7.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-headless-accordion": "^1.0.2",
"react-input-mask": "^2.0.4",
"react-modal": "^3.16.1",
"react-router-dom": "^6.6.1",

8
react-project/src/components/Footer/Footer.tsx
View File

@ -1,9 +1,17 @@
import { Newsletter } from "./Newsletter";
import { Links } from "./Links";
import footer from "./assets/modules/Footer.module.scss";
const Footer = () => {
return (
<footer>
<Newsletter />
<div className={footer["wrapper"]}>
<Links />
<div>REDES SOCIAIS</div>
</div>
</footer>
);
};

90
react-project/src/components/Footer/Links.tsx Normal file
View File

@ -0,0 +1,90 @@
import {
Accordion,
AccordionBody,
AccordionHeader,
AccordionItem,
} from "react-headless-accordion";
import links from "./assets/modules/Links.module.scss";
import more from "./assets/svgs/more.svg";
const Links = () => {
return (
<Accordion className={links["accordion"]} alwaysOpen={true}>
<AccordionItem>
<AccordionHeader>
<h4>Institucional</h4>
<img src={more} alt="Icone de +" />
</AccordionHeader>
<AccordionBody>
<ul>
<li>
<a href="/">Quem Somos</a>
</li>
<li>
<a href="/">Política de Privacidade</a>
</li>
<li>
<a href="/">Segurança</a>
</li>
<li>
<a href="/">Seja um Revendedor</a>
</li>
</ul>
</AccordionBody>
</AccordionItem>
<AccordionItem>
<AccordionHeader>
<h4>Dúvidas</h4>
<img src={more} alt="Icone de +" />
</AccordionHeader>
<AccordionBody>
<ul>
<li>
<a href="/">Entrega</a>
</li>
<li>
<a href="/">Pagamento</a>
</li>
<li>
<a href="/">Trocas e Devoluções</a>
</li>
<li>
<a href="/">Dúvidas Frequentes</a>
</li>
</ul>
</AccordionBody>
</AccordionItem>
<AccordionItem>
<AccordionHeader>
<h4>Fale Conosco</h4>
<img src={more} alt="Icone de +" />
</AccordionHeader>
<AccordionBody>
<ul>
<li>
<span>Atendimento ao Consumidor</span>
</li>
<li>
<a href="tel:1141599504">(11) 4159 9504</a>
</li>
<li>
<span>Atendimento Online</span>
</li>
<li>
<a href="tel:11994338825">(11) 99433-8825</a>
</li>
</ul>
</AccordionBody>
</AccordionItem>
</Accordion>
);
};
export { Links };

10
react-project/src/components/Footer/assets/modules/Footer.module.scss Normal file
View File

@ -0,0 +1,10 @@
.wrapper {
padding: 50px 100px;
display: flex;
justify-content: space-between;
@media screen and (max-width: 1024px) {
padding: 24px 16px;
flex-direction: column;
}
}

45
react-project/src/components/Footer/assets/modules/Links.module.scss Normal file
View File

@ -0,0 +1,45 @@
.accordion {
width: 100%;
button {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border: none;
background: none;
margin-bottom: 12px;
cursor: pointer;
h4 {
font-weight: 500;
font-size: 14px;
line-height: 16px;
color: var(--black-200);
}
}
ul {
li {
margin-bottom: 12px;
a {
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: var(--black-200);
text-decoration: none;
}
span {
font-weight: 500;
font-size: 12px;
line-height: 14px;
color: var(--black-200);
}
&:last-child {
text-decoration: underline;
}
}
}
}

3
react-project/src/components/Footer/assets/svgs/more.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