WilliamSimao/desafio-react-e-typescript-WilliamSimao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Develop #1

Merged
WilliamSimao merged 10 commits from Develop into main 2023-01-18 18:37:52 +00:00
Conversation 0 Commits 10 Files Changed 85 +360 -210
42 changed files with 360 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit df96c57d9b - Show all commits

9
react-ts/src/assets/images/AmericaCard.svg
View File

File diff suppressed because one or more lines are too long

9
react-ts/src/assets/images/AmericaCardMobile.svg
View File

File diff suppressed because one or more lines are too long

BIN
react-ts/src/assets/images/AmericaEx.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

BIN
react-ts/src/assets/images/Boleto.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

9
react-ts/src/assets/images/Boleto.svg
View File

File diff suppressed because one or more lines are too long

9
react-ts/src/assets/images/BoletoMobile.svg
View File

File diff suppressed because one or more lines are too long

BIN
react-ts/src/assets/images/EloCard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

9
react-ts/src/assets/images/EloCard.svg
View File

File diff suppressed because one or more lines are too long

9
react-ts/src/assets/images/EloCardMobile.svg
View File

File diff suppressed because one or more lines are too long

BIN
react-ts/src/assets/images/HiperCard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

9
react-ts/src/assets/images/HiperCard.svg
View File

File diff suppressed because one or more lines are too long

9
react-ts/src/assets/images/HiperCardMobile.svg
View File

File diff suppressed because one or more lines are too long

BIN
react-ts/src/assets/images/MasterCard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

9
react-ts/src/assets/images/MasterCard.svg
View File

File diff suppressed because one or more lines are too long

9
react-ts/src/assets/images/MasterCardMobile.svg
View File

File diff suppressed because one or more lines are too long

BIN
react-ts/src/assets/images/MasterCardPNG.png
View File

Binary file not shown.

BIN
react-ts/src/assets/images/PayPal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

9
react-ts/src/assets/images/PayPal.svg
View File

File diff suppressed because one or more lines are too long

9
react-ts/src/assets/images/PayPalMobile.svg
View File

File diff suppressed because one or more lines are too long

BIN
react-ts/src/assets/images/VisaCard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

9
react-ts/src/assets/images/VisaCard.svg
View File

File diff suppressed because one or more lines are too long

9
react-ts/src/assets/images/VisaCardMobile.svg
View File

File diff suppressed because one or more lines are too long

BIN
react-ts/src/assets/images/vtex-pci.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

9
react-ts/src/assets/images/vtex-pci.svg
View File

@ -1,9 +0,0 @@
<svg width="218,44" height="136" viewBox="0 0 56 34" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0.408936" width="54.6061" height="34" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_4374_621" transform="translate(0 -0.00590909) scale(0.005 0.0080303)"/>
</pattern>
<image id="image0_4374_621" width="200" height="126" xlink:href="data:image/png;base64,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"/>
</defs>
</svg>

9
react-ts/src/assets/images/vtex-pciMobile.svg
View File

@ -1,9 +0,0 @@
<svg width="45" height="28" viewBox="0 0 45 28" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0.00244141" width="44.9975" height="28" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_3715_7127" transform="translate(0 -0.00622215) scale(0.005 0.00803527)"/>
</pattern>
<image id="image0_3715_7127" width="200" height="126" xlink:href="data:image/png;base64,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"/>
</defs>
</svg>

24
react-ts/src/components/Cards/Entrega.module.scss
View File

@ -25,4 +25,28 @@
color: $color-grey4;
}
}
}
@media only screen and (max-width: 1024px) {
.container {
&__h1 {
text-align: center;
margin-top: 30px;
}
}
}
@media only screen and (min-width: 2500px) {
.container {
&__h1 {
line-height: 56px;
font-size: 48px;
}
&__p {
p {
font-size: 26px;
line-height: 30px;
}
}
}
}

23
react-ts/src/components/Cards/FormaDePagamento.module.scss
View File

@ -25,4 +25,27 @@
color: $color-grey4;
}
}
}
@media only screen and (max-width: 1024px) {
.container {
&__h1 {
text-align: center;
margin-top: 30px;
}
}
}
@media only screen and (min-width: 2500px) {
.container {
&__h1 {
line-height: 56px;
font-size: 48px;
}
&__p {
p {
font-size: 26px;
line-height: 30px;
}
}
}
}

23
react-ts/src/components/Cards/Seguranca.module.scss
View File

@ -25,4 +25,27 @@
color: $color-grey4;
}
}
}
@media only screen and (max-width: 1024px) {
.container {
&__h1 {
text-align: center;
margin-top: 30px;
}
}
}
@media only screen and (min-width: 2500px) {
.container {
&__h1 {
line-height: 56px;
font-size: 48px;
}
&__p {
p {
font-size: 26px;
line-height: 30px;
}
}
}
}

23
react-ts/src/components/Cards/Sobre.module.scss
View File

@ -25,4 +25,27 @@
color: $color-grey4;
}
}
}
@media only screen and (max-width: 1024px) {
.container {
&__h1 {
text-align: center;
margin-top: 30px;
}
}
}
@media only screen and (min-width: 2500px) {
.container {
&__h1 {
line-height: 56px;
font-size: 48px;
}
&__p {
p {
font-size: 26px;
line-height: 30px;
}
}
}
}

23
react-ts/src/components/Cards/Troca.module.scss
View File

@ -25,4 +25,27 @@
color: $color-grey4;
}
}
}
@media only screen and (max-width: 1024px) {
.container {
&__h1 {
text-align: center;
margin-top: 30px;
}
}
}
@media only screen and (min-width: 2500px) {
.container {
&__h1 {
font-size: 48px;
line-height: 56px;
}
&__p {
p {
font-size: 26px;
line-height: 30px;
}
}
}
}

54
react-ts/src/components/CardsSelect/CardsSelect.module.scss
View File

@ -30,7 +30,8 @@
display: flex;
flex-direction: column;
width: 100%;
button {
&__component {
background-color: transparent;
max-width: 302px;
height: 39px;
border: none;
@ -62,4 +63,53 @@
color: $color-white1;
}
}
}
}
@media only screen and (max-width: 1024px) {
.container {
padding: 0 16px;
&__wrapper {
flex-direction: column;
&__button {
max-width: unset;
border-right: none;
height: 224px;
&__wrapper {
flex-direction: column;
width: 100%;
button {
max-width: unset;
width: 100%;
}
}
}
&__cards {
margin-left: unset;
}
}
}
}
@media only screen and (min-width: 2500px) {
.container {
&__h1 {
font-size: 48px;
line-height: 56px;
}
&__wrapper {
&__button {
max-width: 590px;
height: 465px;
&__wrapper {
&__component {
max-width: 590px;
height: 58px;
font-size: 32px;
line-height: 38px;
}
}
}
}
}
}

67
react-ts/src/components/CardsSelect/CardsSelect.tsx
View File

@ -8,37 +8,64 @@ import Troca from '../Cards/Troca';
import Seguranca from '../Cards/Seguranca';
import ContactForm from '../ContactForm/ContactForm';
const CardSelect = () => {
const buttonToRender = [
{
label : 'Sobre',
id : 0,
},
{
label : 'Forma de Pagamento',
id : 1,
},
{
label : 'Entrega',
id : 2,
},
{
label : 'Troca e Devolução',
id : 3,
},
{
label : 'Segurança e Privacidade',
id : 4,
},
{
label : 'Contato',
id : 5,
}
]
const [render, setRender] = useState ("Sobre");
const CardSelect = () => {
const [render, setRender] = useState ("Sobre");
const button = () => {
return buttonToRender.map((
button
) => (
<button key={button.id} onClick={()=>setRender(button.label)} className={`${styles['container__wrapper__button__wrapper__component']} ${render === button.label ? styles['active'] : null }`}>{button.label}</button>
) )
}
return (
<div className={styles['container']}>
<div className={styles['container']}>
<h1 className={styles['container__h1']}>institucional</h1>
<div className={styles['container__wrapper']}>
<div className={styles['container__wrapper__button']} >
<div className={styles['container__wrapper__button__wrapper']}>
<button onClick={()=> setRender("Sobre")}>Sobre</button>
<button onClick={()=> setRender("Forma de Pagamento")}>Forma de Pagamento</button>
<button onClick={()=> setRender("Entrega")} >Entrega</button>
<button onClick={()=> setRender("Troca e Devolução")}>Troca e Devolução</button>
<button onClick={()=> setRender("Segurança e Privacidade")}>Segurança e Privacidade</button>
<button onClick={()=> setRender("Contato")}>Contato</button>
{button()}
</div>
</div>
<div className={styles['container__wrapper__cards']}>
{render === "Sobre" && <Sobre/>}
{render === "Forma de Pagamento" && <FormaDePagamento/>}
{render === "Entrega" && <Entrega/>}
{render === "Troca e Devolução" && <Troca/>}
{render === "Segurança e Privacidade" && <Seguranca/>}
{render === "Contato" && <ContactForm/>}
</div>
<div className={styles['container__wrapper__cards']}>
{render === "Sobre" && <Sobre/>}
{render === "Forma de Pagamento" && <FormaDePagamento/>}
{render === "Entrega" && <Entrega/>}
{render === "Troca e Devolução" && <Troca/>}
{render === "Segurança e Privacidade" && <Seguranca/>}
{render === "Contato" && <ContactForm/>}
</div>
</div>
</div>
)}
export default CardSelect;

16
react-ts/src/components/ContactForm/ContactForm.module.scss
View File

@ -129,11 +129,26 @@
border-color: $color-red1;
}
}
@media only screen and (min-width: 375px) {
.container {
&__checkbox {
max-width: 992px;
&__errorCheck {
right: 92px !important;
top: 17px
}
}
}
}
@media only screen and (max-width: 1024px) {
.container {
max-width: 992px;
&__form {
max-width: 992px;
width: 100%;
margin-top: 30px;
&__title {
text-align: center;
}
@ -166,6 +181,7 @@
max-width: 1680px;
width: 100%;
&__form {
max-width: 1680px;
&__title {
font-size: 48px;
line-height: 56px;

64
react-ts/src/components/Footer/Footer.module.scss
View File

@ -21,10 +21,17 @@
&__payments {
display: flex;
column-gap: 12px;
align-items: center;
&__row {
border-right: 1px solid $color-grey1;
height: 25px;
}
img {
&:nth-child(8) {
border-left: 1px solid $color-grey1;
padding-left: 12px;
height: 20px;
width: 36px;
&:nth-child(9) {
width: 54.61px;
height: 34px;
}
}
}
@ -48,6 +55,46 @@
}
}
@media only screen and (max-width: 1024px) {
.footer {
&__container {
display: flex;
align-items: unset;
justify-content: unset;
flex-direction: column;
row-gap: 15px;
&__text {
display: flex;
order: 2;
}
&__text2 {
order: 3;
}
&__payments {
column-gap: 11px;
img {
width: 30px;
height: 17px;
&:nth-child(9) {
width: 45px;
height: 28px;
}
}
}
}
&__contact {
display: flex;
flex-direction: column;
row-gap: 5px;
position: absolute;
right: 16px;
margin-top: 12px;
}
}
}
@media only screen and (max-width: 1024px) {
.footer {
padding: 15px 16px;
@ -63,9 +110,6 @@
display: flex;
order: 2;
}
&__payments{
display: none;
}
&__text2 {
order: 3;
}
@ -94,9 +138,11 @@
display: flex;
column-gap: 12px;
img {
&:nth-child(8) {
border-left: 1px solid $color-grey1;
padding-left: 12px;
width: 70px;
height: 39.27px;
&:nth-child(9) {
width: 106px;
height: 66px;
}
}
}

36
react-ts/src/components/Footer/Footer.tsx
View File

@ -2,16 +2,16 @@ import styles from './Footer.module.scss';
import ScrollTop from '../ScrollTop/ScrollTop';
import Whatsap from '../Whatsapp/WhatsApp';
import FooterCardsMobile from './FooterCardsMobile';
import MasterCard from '../../assets/images/MasterCard.svg';
import VisaCard from '../../assets/images/VisaCard.svg';
import AmericaCard from '../../assets/images/AmericaCard.svg';
import EloCard from '../../assets/images/EloCard.svg';
import HiperCard from '../../assets/images/HiperCard.svg';
import PayPal from '../../assets/images/PayPal.svg';
import Boleto from '../../assets/images/Boleto.svg';
import VtexPci from '../../assets/images/vtex-pci.svg';
import MasterCard from '../../assets/images/MasterCard.png';
import VisaCard from '../../assets/images/VisaCard.png';
import AmericaCard from '../../assets/images/AmericaEx.png';
import EloCard from '../../assets/images/EloCard.png';
import HiperCard from '../../assets/images/HiperCard.png';
import PayPal from '../../assets/images/PayPal.png';
import Boleto from '../../assets/images/Boleto.png';
import VtexPci from '../../assets/images/vtex-pci.png';
import Vtex from '../../assets/images/vtex.svg';
import M3 from '../../assets/images/M3.svg';
@ -19,20 +19,20 @@ const Footer = () => {
return (
<footer className={styles['footer']}>
<div className={styles['footer__container']}>
<FooterCardsMobile/>
<div className={styles['footer__container__text']}>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor</p>
</div>
<picture className={styles['footer__container__payments']}>
<img width={36} src={MasterCard} alt="Badeira Master" />
<img width={35} src={VisaCard} alt="Bandeira Visa"/>
<img width={35} src={AmericaCard} alt="Badeira America Express" />
<img width={37} src={EloCard} alt="Bandeira Elo" />
<img width={35} src={HiperCard} alt="Bandeira HiperCard" />
<img width={34} src={PayPal} alt="PayPal" />
<img width={36} className={styles['footer__container__payments__boleto']} src={Boleto} alt="Boleto" />
<img width={54} className={styles['footer__container__payments__vtex']} src={VtexPci} alt="Vtex" />
<img src={MasterCard} alt="Badeira Master" />
<img src={VisaCard} alt="Bandeira Visa"/>
<img src={AmericaCard} alt="Badeira America Express" />
<img src={EloCard} alt="Bandeira Elo" />
<img src={HiperCard} alt="Bandeira HiperCard" />
<img src={PayPal} alt="PayPal" />
<img className={styles['footer__container__payments__boleto']} src={Boleto} alt="Boleto" />
<div className={styles['footer__container__payments__row']}></div>
<img className={styles['footer__container__payments__div__vtex']} src={VtexPci} alt="Vtex" />
</picture>
<div className={styles['footer__container__text2']}>
<p>Powered by</p>

2
react-ts/src/components/FooterLinksMobile/FooterLinksAccordion.tsx
View File

@ -14,7 +14,7 @@ const FooterLinksAccordion = ({ title, content }: Title) => {
<div className={styles['container']}>
<div className={styles['container__title']} onClick={() => setIsActive(!isActive)}>
<h1>{title}</h1>
{isActive ? <span>-</span> : <span>+</span>}
{isActive ? <span>_</span> : <span>+</span>}
</div>
{isActive && <>{content}</>}
</div>

15
react-ts/src/components/MenuMobile/Component.module.scss
View File

@ -2,8 +2,8 @@
.container-components {
width: 100%;
height: 168.5%;
position: absolute;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(69, 69, 69, 0.7);
@ -15,6 +15,7 @@
position: absolute;
width: 96.48%;
height: 585px;
transition: all .5s ease-in-out;
&__logon {
width: 100%;
display: flex;
@ -28,7 +29,7 @@
}
&__ul {
width: 100%;
height: 100%;
height: 548px;
position: absolute;
display: flex;
flex-direction: column;
@ -49,3 +50,11 @@
}
}
}
@media only screen and (min-width: 375px) {
.container-components {
&__wrapper {
width: 90.4%;
}
}
}

12
react-ts/src/components/MenuMobile/ComponentMobile.tsx
View File

@ -1,18 +1,24 @@
import { useRef } from 'react';
import styles from './Component.module.scss';
import UserAccount from '../UserAccount/UseAccount';
import CloseMobile from '../../assets/images/CloseMobile.svg';
import useOnClickOutside from './UseClickOutSide';
interface MenuComponentProps {
closeMenu: () => void;
}
const MenuComponent = ({closeMenu}: MenuComponentProps) => {
const mobileRef = useRef<HTMLDivElement>(null)
useOnClickOutside(mobileRef, closeMenu)
return (
<div className={styles['container-components']}>
<div className={styles['container-components__wrapper']}>
<div ref={mobileRef} className={styles['container-components__wrapper']}>
<div className={styles['container-components__wrapper__logon']}>
<UserAccount/>
<button onClick={closeMenu} type='button'><img src={CloseMobile} alt="Fecha Menu"/></button>

2
react-ts/src/components/MenuMobile/MenuMobile.tsx
View File

@ -19,7 +19,7 @@ const MenuMobile = () => {
return (
<div className={styles['container-modal']}>
<button onClick={openModal}></button>
{IsOpen ? <MenuComponent closeMenu={closeModal} /> : <img onClick={openModal} src={OpenMobile} alt="Abre Menu" /> }
{IsOpen ? <MenuComponent closeMenu={closeModal} />: <img onClick={openModal} src={OpenMobile} alt="Abre Menu" />}
</div>
)
}

32
react-ts/src/components/MenuMobile/useClickOutSide.tsx Normal file
View File

@ -0,0 +1,32 @@
import { useEffect } from 'react';
import type { RefObject } from 'react';
type AnyEvent = MouseEvent | TouchEvent;
function useOnClickOutside<T extends HTMLElement = HTMLElement>(
ref: RefObject<T>,
handler: (event: AnyEvent) => void,
): void {
useEffect(() => {
const listener = (event: AnyEvent) => {
const el = ref?.current;
// Do nothing if clicking ref's element or descendent elements
if (!el || el.contains(event.target as Node)) {
return;
}
handler(event);
};
document.addEventListener('mousedown', listener);
document.addEventListener('touchstart', listener);
return () => {
document.removeEventListener('mousedown', listener);
document.removeEventListener('touchstart', listener);
};
}, [ref, handler]);
}
export default useOnClickOutside;

8
react-ts/src/components/SocialMedia/SocialMedia.module.scss
View File

@ -19,14 +19,6 @@
}
}
@media only screen and (max-width: 1025px ) {
.container {
a {
display: none;
}
}
}
@media only screen and (min-width: 2500px) {
.container {
&__picture {

2
react-ts/src/main.tsx
View File

@ -5,6 +5,6 @@ import './index.scss'
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<Home />
<Home/>
</React.StrictMode>,
)