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

feat(Main): finaliza projeto

Browse Source
This commit is contained in:
William Simão Cavalcante 2023-01-18 15:31:02 -03:00
parent df96c57d9b
commit 708bc2bd01
15 changed files with 125 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
react-ts/package-lock.json generated
View File

@ -18,6 +18,7 @@
"@vitejs/plugin-react": "^3.0.0",
"formik": "^2.2.9",
"react-modal": "^3.16.1",
"react-router-dom": "^6.6.2",
"sass": "^1.57.1",
"typescript": "^4.9.3",
"vite": "^4.0.0",
@ -790,6 +791,15 @@
"@jridgewell/sourcemap-codec": "1.4.14"
}
},
"node_modules/@remix-run/router": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
"integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==",
"dev": true,
"engines": {
"node": ">=14"
}
},
"node_modules/@types/lodash": {
"version": "4.14.191",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
@ -1538,6 +1548,38 @@
"node": ">=0.10.0"
}
},
"node_modules/react-router": {
"version": "6.6.2",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.2.tgz",
"integrity": "sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==",
"dev": true,
"dependencies": {
"@remix-run/router": "1.2.1"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.6.2",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.2.tgz",
"integrity": "sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==",
"dev": true,
"dependencies": {
"@remix-run/router": "1.2.1",
"react-router": "6.6.2"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/readdirp": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",

1
react-ts/package.json
View File

@ -19,6 +19,7 @@
"@vitejs/plugin-react": "^3.0.0",
"formik": "^2.2.9",
"react-modal": "^3.16.1",
"react-router-dom": "^6.6.2",
"sass": "^1.57.1",
"typescript": "^4.9.3",
"vite": "^4.0.0",

17
react-ts/src/Routes/Routes.tsx Normal file
View File

@ -0,0 +1,17 @@
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from '../Pages/Home/Home';
const RoutesComponent = () => {
return (
<BrowserRouter>
<Routes>
<Route path='/' element={<Home/>}/>
</Routes>
</BrowserRouter>
)
}
export default RoutesComponent;

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

@ -124,12 +124,21 @@
background-color: $color-black3;
}
}
&__span {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: $color-green1;
margin-top: 12px;
}
}
.invalid {
border-color: $color-red1;
}
}
@media only screen and (min-width: 375px) {
@media only screen and (max-width: 375px) {
.container {
&__checkbox {
max-width: 992px;
@ -234,6 +243,10 @@
font-size: 32px;
line-height: 38px;
}
&__span {
font-size: 24px;
line-height: 28px;
}
}
}
}

18
react-ts/src/components/ContactForm/ContactForm.tsx
View File

@ -1,7 +1,8 @@
import { Formik, Form, Field, ErrorMessage } from "formik";
import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik";
import styles from './ContactForm.module.scss';
import FormSchema from '../../Schema/FormSchema';
import { useState } from "react";
interface IFormikValues {
name: string;
@ -25,10 +26,14 @@ const initialValues = {
const ContactForm = () => {
const handleSubmitForm = (values: IFormikValues) => {
console.log(values);
};
const [enviado, setEnviado] = useState(false);
const handleSubmitForm = (values: IFormikValues, actions: FormikHelpers<IFormikValues>) => {
console.log(values);
actions.resetForm();
setEnviado(true);
};
return (
<div className={styles['container']}>
@ -124,6 +129,9 @@ const ContactForm = () => {
<div className={styles['container__button']} >
<button type="submit">cadastre-se</button>
{enviado ? (
<span className={styles['container__button__span']}>*Formulário enviado com sucesso!</span>
) : ('')}
</div>
</Form>
@ -136,3 +144,5 @@ const ContactForm = () => {
export default ContactForm;

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

@ -1,32 +0,0 @@
@import '../../styles/utils/Variables.scss';
.payments {
display: none;
align-items: center;
column-gap: 12px;
img {
&:nth-child(8) {
border-left: 1px solid $color-grey1;
padding-left: 12px;
}
}
}
@media only screen and (max-width: 1024px) {
.payments {
display: flex;
align-items: center;
column-gap: 12px;
img {
&:nth-child(8) {
border-left: 1px solid $color-grey1;
padding-left: 12px;
}
}
}
}

29
react-ts/src/components/Footer/FooterCardsMobile.tsx
View File

@ -1,29 +0,0 @@
import styles from './FooterCardsMobile.module.scss';
import MasterCard from '../../assets/images/MasterCardMobile.svg';
import VisaCard from '../../assets/images/VisaCardMobile.svg';
import AmericaCard from '../../assets/images/AmericaCardMobile.svg';
import EloCard from '../../assets/images/EloCardMobile.svg';
import HiperCard from '../../assets/images/HiperCardMobile.svg';
import PayPal from '../../assets/images/PayPalMobile.svg';
import Boleto from '../../assets/images/BoletoMobile.svg';
import VtexPci from '../../assets/images/vtex-pciMobile.svg';
const FooterCardsMobile = () => {
return (
<div className={styles['payments']}>
<img src={MasterCard} alt="Bandeira Master" />
<img src={VisaCard} alt="Bandeira Visa" />
<img src={AmericaCard} alt="Bandeira America Express" />
<img src={EloCard} alt="Bandeira Elo" />
<img src={HiperCard} alt="Bandeira HiperCard" />
<img src={PayPal} alt="Bandeira PayPal" />
<img src={Boleto} alt="Bandeira Boleto" />
<img src={VtexPci} alt="Bandeira Vtex" />
</div>
)
}
export default FooterCardsMobile;

4
react-ts/src/components/Header/Header.module.scss
View File

@ -36,6 +36,10 @@
line-height: 16px;
color: $color-white1;
text-transform: uppercase;
transition: all .5s ease-in-out;
&:hover {
color: $color-blue1;
}
}
}
}

5
react-ts/src/components/InputSearch/InputSearch.module.scss
View File

@ -5,7 +5,7 @@
align-items: center;
justify-content: end;
position: relative;
max-width: 236px;
max-width: 264px;
width: 100%;
height: 32px;
border-radius: 5px;
@ -24,6 +24,9 @@
&::placeholder {
color: $color-grey1;
}
&:focus {
border: $color-black1 ;
}
}
&__icon {
position: absolute;

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

@ -51,7 +51,7 @@
}
}
@media only screen and (min-width: 375px) {
@media only screen and (max-width: 375px) {
.container-components {
&__wrapper {
width: 90.4%;

4
react-ts/src/components/NewsLetter/NewsLetter.module.scss
View File

@ -58,6 +58,10 @@
border: none;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
cursor: pointer;
transition: all ease-in-out 200ms;
&:hover {
background-color: $color-black3;
}
}
}
}

1
react-ts/src/components/NewsLetter/NewsLetter.tsx
View File

@ -1,6 +1,7 @@
import styles from './NewsLetter.module.scss';
const NewsLetter = () => {
return (
<div className={styles['containerNewsLetter']}>
<div className={styles['containerNewsLetter__wrapper']}>

22
react-ts/src/components/SocialMedia/SocialMedia.tsx
View File

@ -11,13 +11,23 @@ const SocialMedia = () => {
return (
<div className={styles['container']}>
<picture className={styles['container__picture']}>
<img src={Facebook} alt="Facebook" />
<img src={Instagram} alt="Instagram" />
<img src={Twitter} alt="Twitter" />
<img src={YouTube} alt="YouTube" />
<img src={Linkedin} alt="Linkedin" />
<a href="https://www.facebook.com/digitalm3/">
<img src={Facebook} alt="Facebook" />
</a>
<a href="https://www.instagram.com/m3.ecommerce/">
<img src={Instagram} alt="Instagram" />
</a>
<a href="/">
<img src={Twitter} alt="Twitter" />
</a>
<a href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA">
<img src={YouTube} alt="YouTube" />
</a>
<a href="https://www.linkedin.com/company/m3ecommerce/">
<img src={Linkedin} alt="Linkedin" />
</a>
</picture>
<a href="/">
<a href="https://m3ecommerce.com/?fbclid=IwAR1SREycWbHp_D_sDmn0vPIy6qYdZaVtMwb0oR27Gpi-RLODn2qf6DnGTKI">
www.loremipsum.com
</a>
</div>

4
react-ts/src/components/UserAccount/UserAccount.module.scss
View File

@ -15,6 +15,10 @@
line-height: 16px;
color: $color-white1;
text-transform: uppercase;
transition: all .5s ease-in-out;
&:hover {
color: $color-blue1;
}
}
}
}

3
react-ts/src/styles/utils/Variables.scss
View File

@ -16,5 +16,8 @@ $color-black2: #303030;
$color-black3: #100D0E;
$color-black4: #292929;
$color-blue1: #6fd5f2;
$color-green1: #008000;
//fonts
$font-family: 'Roboto', sans-serif;