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

feat: Cria footerTop desktop telas menores que 2500px

Browse Source
This commit is contained in:
Saulo Klein Nery 2022-12-28 16:46:09 -03:00
parent 8c4102457c
commit 1a300effc6
10 changed files with 279 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Footer/Footer.tsx
View File

@ -1,7 +1,15 @@
import React from "react";
import styles from "../../styles/main.module.scss";
import FooterTop from "./FooterTop";
import FooterBottom from "./FooterBottom";
const Footer = () => {
return <footer></footer>;
return (
<footer className={styles["footer-page"]}>
<FooterTop />
{/* <FooterBottom /> */}
</footer>
);
};
export default Footer;

7
src/components/Footer/FooterBottom.tsx Normal file
View File

@ -0,0 +1,7 @@
import styles from "../../styles/main.module.scss";
const FooterBottom = () => {
return <section className={styles["footer-bottom"]}></section>;
};
export default FooterBottom;

48
src/components/Footer/FooterList.tsx Normal file
View File

@ -0,0 +1,48 @@
import styles from "../../styles/main.module.scss";
interface FooterListProps {
title: String;
texts: Array<String>;
link?: string;
childStrong?: boolean;
}
const FooterList = ({ title, texts, childStrong, link }: FooterListProps) => {
const footerList = "footer-list";
let className = "";
if (!link) link = "#";
if (childStrong) className = "strong";
return (
<div className={styles[footerList]}>
<h2 className={styles[footerList + "__title"]}>{title}</h2>
<ul className={styles[footerList + "__list"]}>
{texts.map((text, index) => {
if (index === texts.length - 1)
return (
<li
key={index}
className={`${styles[footerList + "__item"]} ${styles[className]}`}
>
<a href={link}>{text}</a>
</li>
);
return (
<li
key={index}
className={`${styles[footerList + "__item"]} ${styles[className]}`}
>
{text}
</li>
);
})}
</ul>
</div>
);
};
export default FooterList;

83
src/components/Footer/FooterTop.tsx Normal file
View File

@ -0,0 +1,83 @@
import styles from "../../styles/main.module.scss";
import FooterList from "./FooterList";
import whatsAppICon from "../../assets/icons/whatsapp-icon.svg";
import IconSocialMedia from "./IconSocialMedia";
import facebookIcon from "../../assets/icons/facebook-icon.svg";
import instagramIcon from "../../assets/icons/instagram-icon.svg";
import twitterIcon from "../../assets/icons/twitter-icon.svg";
import youtubeIcon from "../../assets/icons/youtube-icon.svg";
import linkedinIcon from "../../assets/icons/linkedin-icon.svg";
import arrowUp from "../../assets/icons/arrow-up-icon.svg";
const FooterTop = () => {
const footerList1 = [
"Quem Somos",
"Política de Privacidade",
"Segurança",
"Seja um Revendedor",
];
const footerList2 = ["Entrega", "Pagamento", "Trocas e Devoluções", "Dúvidas Frequentes"];
const footerList3 = [
"Atendimento Ao Consumidor",
"(11) 4159 9504",
"Atendimento Online",
"(11) 99433-8825",
];
return (
<section className={styles["footer-top"]}>
<ul className={styles["footer-top__lists"]}>
<li className={styles["footer-top__item-list"]}>
<FooterList title="INSTITUCIONAL" texts={footerList1} />
</li>
<li className={styles["footer-top__item-list"]}>
<FooterList title="DÚVIDAS" texts={footerList2} />
</li>
<li className={styles["footer-top__item-list"]}>
<FooterList title="FALE CONOSCO" texts={footerList3} childStrong />
</li>
</ul>
<div className={styles["social-media"]}>
<ul className={styles["social-media__list"]}>
<li className={styles["social-media__item"]}>
<IconSocialMedia src={facebookIcon} alt="" />
</li>
<li className={styles["social-media__item"]}>
<IconSocialMedia src={instagramIcon} alt="" />
</li>
<li className={styles["social-media__item"]}>
<IconSocialMedia src={twitterIcon} alt="" />
</li>
<li className={styles["social-media__item"]}>
<IconSocialMedia src={youtubeIcon} alt="" />
</li>
<li className={styles["social-media__item"]}>
<IconSocialMedia src={linkedinIcon} alt="" />
</li>
</ul>
<p className={styles["social-media__social-link"]}>www.loremipsum.com</p>
</div>
<div className={styles["util-buttons"]}>
<a href="#" className={styles["util-buttons__whatsapp"]}>
<img src={whatsAppICon} alt="Whatsapp Icon" />
</a>
<button className={styles["util-buttons__return-top"]}>
<img src={arrowUp} alt="Seta para Cima" />
</button>
</div>
</section>
);
};
export default FooterTop;

19
src/components/Footer/IconSocialMedia.tsx Normal file
View File

@ -0,0 +1,19 @@
import styles from "../../styles/main.module.scss";
interface IconSocialMediaProps {
src: string;
href?: string;
alt: string;
}
const IconSocialMedia = ({ src, href, alt }: IconSocialMediaProps) => {
if (!href) href = "#";
return (
<a href={href} className={styles["social-media__link"]}>
<img className={styles["social-media__icon"]} src={src} alt={alt} />
</a>
);
};
export default IconSocialMedia;

4
src/components/Header/HeaderBottom.tsx
View File

@ -4,7 +4,7 @@ import { HeaderProps } from "./Header";
const HeaderBottom = ({ isOpened, setIsOpened }: HeaderProps) => {
return (
<div className={`${styles["header-bottom"]} ${styles[`${isOpened && "opened"}`]}`}>
<section className={`${styles["header-bottom"]} ${styles[`${isOpened && "opened"}`]}`}>
<div className={styles["header-bottom__content"]}>
<div className={styles["header-bottom__menu"]}>
<button
@ -25,7 +25,7 @@ const HeaderBottom = ({ isOpened, setIsOpened }: HeaderProps) => {
className={styles["header-bottom__overlay"]}
onClick={() => setIsOpened(!isOpened)}
></div>
</div>
</section>
);
};

4
src/components/Header/HeaderTop.tsx
View File

@ -20,7 +20,7 @@ const HeaderTop = ({ isOpened, setIsOpened }: HeaderProps) => {
};
return (
<div className={styles["header-top"]}>
<section className={styles["header-top"]}>
<button
className={styles["header-top__menu-button"]}
onClick={() => setIsOpened(!isOpened)}
@ -69,7 +69,7 @@ const HeaderTop = ({ isOpened, setIsOpened }: HeaderProps) => {
/>
</a>
</div>
</div>
</section>
);
};

4
src/styles/main.module.scss
View File

@ -3,3 +3,7 @@
@import "utils/reset.scss";
@import "partials/header.scss";
@import "partials/footer.scss";
main {
height: 50vh;
}

104
src/styles/partials/footer.scss
View File

@ -0,0 +1,104 @@
.footer-page {
.footer-top {
padding: 50px 100px 64px;
display: flex;
position: relative;
justify-content: space-between;
&__lists {
display: flex;
list-style-type: none;
}
&__item-list {
&:not(:last-of-type) {
margin-right: 121px;
}
.footer-list {
&__title {
font-weight: 500;
font-size: 14px;
line-height: 16px;
color: #303030;
margin-bottom: 12px;
}
&__list {
list-style-type: none;
}
&__item,
&__item a {
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: #303030;
&.strong:nth-of-type(odd) {
font-weight: 500;
}
&:not(:last-of-type) {
margin-bottom: 12px;
}
}
}
}
.social-media {
&__list {
list-style-type: none;
display: flex;
margin-bottom: 12px;
}
&__item {
height: 35px;
width: 35px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #303030;
border-radius: 50%;
&:not(:last-of-type) {
margin-right: 10px;
}
}
&__social-link {
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #303030;
}
}
.util-buttons {
position: absolute;
top: 41px;
right: 16px;
&__return-top {
border: none;
background: #c4c4c4;
height: 34px;
width: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 5px;
img {
transform: translateX(-0.5px);
}
}
}
}
.footer-bottom {
padding: 20px 100px;
}
}

2
src/styles/partials/header.scss
View File

@ -141,7 +141,7 @@
font-size: 14px;
line-height: 16px;
color: #ffffff;
transition: all 0.4s ease-in-out;
transition: all 0.2s ease-in-out;
@include mq(lg, max) {
position: absolute;