From f54602f929d7823a2b557af726beedd3a87df787 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 20 Jan 2023 19:19:30 -0300 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20adiciona=20o=20body=20e=20sua=20est?= =?UTF-8?q?iliza=C3=A7=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/assets/images/arrowicon.svg | 3 + .../src/assets/images/breadcrumbicon.svg | 3 + .../src/components/Body/Body.module.scss | 158 ++++++++++++++++++ .../src/components/Body/Body.tsx | 25 +++ .../Body/BreadCrumb/BreadCrumb.module.scss | 50 ++++++ .../components/Body/BreadCrumb/BreadCrumb.tsx | 26 +++ .../src/components/Body/Tabs/Contato.tsx | 7 + .../src/components/Body/Tabs/Entrega.tsx | 42 +++++ .../components/Body/Tabs/FormaDePagamento.tsx | 42 +++++ .../Body/Tabs/SegurancaEPrivacidade.tsx | 42 +++++ .../src/components/Body/Tabs/Sobre.tsx | 43 +++++ .../components/Body/Tabs/TabDisposition.tsx | 46 +++++ .../Body/Tabs/TabDispositionItems.js | 35 ++++ .../components/Body/Tabs/TrocaEDevolucao.tsx | 42 +++++ desafio-react-e-typescript/src/pages/Home.tsx | 2 + 15 files changed, 566 insertions(+) create mode 100644 desafio-react-e-typescript/src/assets/images/arrowicon.svg create mode 100644 desafio-react-e-typescript/src/assets/images/breadcrumbicon.svg create mode 100644 desafio-react-e-typescript/src/components/Body/Body.module.scss create mode 100644 desafio-react-e-typescript/src/components/Body/Body.tsx create mode 100644 desafio-react-e-typescript/src/components/Body/BreadCrumb/BreadCrumb.module.scss create mode 100644 desafio-react-e-typescript/src/components/Body/BreadCrumb/BreadCrumb.tsx create mode 100644 desafio-react-e-typescript/src/components/Body/Tabs/Contato.tsx create mode 100644 desafio-react-e-typescript/src/components/Body/Tabs/Entrega.tsx create mode 100644 desafio-react-e-typescript/src/components/Body/Tabs/FormaDePagamento.tsx create mode 100644 desafio-react-e-typescript/src/components/Body/Tabs/SegurancaEPrivacidade.tsx create mode 100644 desafio-react-e-typescript/src/components/Body/Tabs/Sobre.tsx create mode 100644 desafio-react-e-typescript/src/components/Body/Tabs/TabDisposition.tsx create mode 100644 desafio-react-e-typescript/src/components/Body/Tabs/TabDispositionItems.js create mode 100644 desafio-react-e-typescript/src/components/Body/Tabs/TrocaEDevolucao.tsx diff --git a/desafio-react-e-typescript/src/assets/images/arrowicon.svg b/desafio-react-e-typescript/src/assets/images/arrowicon.svg new file mode 100644 index 0000000..7ae3255 --- /dev/null +++ b/desafio-react-e-typescript/src/assets/images/arrowicon.svg @@ -0,0 +1,3 @@ + + + diff --git a/desafio-react-e-typescript/src/assets/images/breadcrumbicon.svg b/desafio-react-e-typescript/src/assets/images/breadcrumbicon.svg new file mode 100644 index 0000000..d58e833 --- /dev/null +++ b/desafio-react-e-typescript/src/assets/images/breadcrumbicon.svg @@ -0,0 +1,3 @@ + + + diff --git a/desafio-react-e-typescript/src/components/Body/Body.module.scss b/desafio-react-e-typescript/src/components/Body/Body.module.scss new file mode 100644 index 0000000..4e23800 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Body/Body.module.scss @@ -0,0 +1,158 @@ +.body-container { + margin: 30px 100px 70px 100px; + + @media screen and (min-width: 2500px) { + margin: 30px 100px 84px 100px; + height: 826px; + } + + @media screen and (max-width: 1024px) { + margin: 30px 16px 80px 16px; + } + + h1 { + font-family: "Roboto", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 28px; + letter-spacing: 0.1em; + text-transform: uppercase; + color: #292929; + text-align: center; + margin: 0 0 80px 0; + + @media screen and (min-width: 2500px) { + font-size: 48px; + line-height: 56px; + } + + @media screen and (max-width: 1024px) { + margin: 0 0 40px 0; + } + } + + .menu-list-container { + display: flex; + + @media screen and (max-width: 1024px) { + display: block; + } + + .menu-list { + width: 100%; + max-width: 302px; + height: 285px; + list-style-type: none; + border-right: 1px solid black; + padding: unset; + + @media screen and (min-width: 2500px) { + max-width: 590px; + height: 465px; + } + + @media screen and (max-width: 1024px) { + max-width: unset; + border: none; + height: 224px; + } + + li { + width: 100%; + max-width: 302px; + height: 39px; + padding: 10px 16px; + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: #7d7d7d; + cursor: pointer; + + @media screen and (min-width: 2500px) { + max-width: 590px; + height: 58px; + font-size: 32px; + line-height: 38px; + margin-bottom: 10px; + } + + @media screen and (max-width: 1024px) { + width: 100%; + } + } + + li.active { + color: white; + background-color: black; + max-width: unset; + } + + .menu-list-sobre { + color: white !important; + background-color: black; + } + } + + .menu-list-container > div { + width: 100%; + } + + .description-container { + padding-top: 10px; + margin: 0px 0px 0px 30px; + + @media screen and (max-width: 1024px) { + padding: unset; + margin: unset; + } + + h2 { + font-family: "Roboto", sans-serif; + font-weight: 700; + font-size: 24px; + line-height: 28px; + color: #292929; + margin-bottom: 12px; + + @media screen and (min-width: 2500px) { + font-size: 48px; + line-height: 56px; + margin: unset; + margin-bottom: 12px; + } + + @media screen and (max-width: 1024px) { + text-align: center; + margin-top: 30px; + margin-bottom: 12px; + } + } + + p { + font-family: "Roboto", sans-serif; + font-size: 13px; + line-height: 15px; + color: #7d7d7d; + margin-bottom: 20px; + + @media screen and (min-width: 2500px) { + font-size: 26px; + line-height: 30px; + } + + @media screen and (max-width: 1024px) { + font-size: 12px; + line-height: 18px; + } + } + + .description-parag { + @media screen and (max-width: 1024px) { + display: none; + } + } + } + } +} diff --git a/desafio-react-e-typescript/src/components/Body/Body.tsx b/desafio-react-e-typescript/src/components/Body/Body.tsx new file mode 100644 index 0000000..5a711cf --- /dev/null +++ b/desafio-react-e-typescript/src/components/Body/Body.tsx @@ -0,0 +1,25 @@ +import React from "react"; + +import styles from "./Body.module.scss"; +import { BreadCrumb } from "./BreadCrumb/BreadCrumb"; +import { TabDisposition } from "./Tabs/TabDisposition"; +import { TabsContents } from "./Tabs/TabDispositionItems"; + +const Body = () => { + return ( +
+ +

Institucional

+ +
+ + +
+
+
+
+
+ ); +}; + +export { Body }; diff --git a/desafio-react-e-typescript/src/components/Body/BreadCrumb/BreadCrumb.module.scss b/desafio-react-e-typescript/src/components/Body/BreadCrumb/BreadCrumb.module.scss new file mode 100644 index 0000000..dae7c10 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Body/BreadCrumb/BreadCrumb.module.scss @@ -0,0 +1,50 @@ +.breadcrumb-container { + display: flex; + align-items: center; + margin-bottom: 80px; + + button { + display: inherit; + background-color: transparent; + align-items: center; + + .breadcrumb-home { + width: 100%; + max-width: 16px; + height: 16px; + margin-right: 10px; + cursor: pointer; + + @media screen and (min-width: 2500px) { + max-width: 31px; + height: 31px; + } + } + .arrow { + width: 100%; + max-width: 4px; + height: 8px; + margin-right: 10px; + + @media screen and (min-width: 2500px) { + max-width: 9px; + height: 15px; + } + } + + a { + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: #c4c4c4; + text-decoration: none; + text-transform: uppercase; + + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + } + } +} diff --git a/desafio-react-e-typescript/src/components/Body/BreadCrumb/BreadCrumb.tsx b/desafio-react-e-typescript/src/components/Body/BreadCrumb/BreadCrumb.tsx new file mode 100644 index 0000000..c5b9298 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Body/BreadCrumb/BreadCrumb.tsx @@ -0,0 +1,26 @@ +import React from "react"; + +import breadcrumb from "../../../assets/images/breadcrumbicon.svg"; +import arrow from "../../../assets/images/arrowicon.svg"; + +import styles from "./BreadCrumb.module.scss"; + +const BreadCrumb = () => { + return ( + <> +
+ +
+ + ); +}; + +export { BreadCrumb }; diff --git a/desafio-react-e-typescript/src/components/Body/Tabs/Contato.tsx b/desafio-react-e-typescript/src/components/Body/Tabs/Contato.tsx new file mode 100644 index 0000000..bb4c1e0 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Body/Tabs/Contato.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const Contato = () => { + return
; +}; + +export { Contato }; diff --git a/desafio-react-e-typescript/src/components/Body/Tabs/Entrega.tsx b/desafio-react-e-typescript/src/components/Body/Tabs/Entrega.tsx new file mode 100644 index 0000000..18d5024 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Body/Tabs/Entrega.tsx @@ -0,0 +1,42 @@ +import React from "react"; + +import styles from "../Body.module.scss"; + +const Entrega = () => { + return ( +
+
+

Entrega

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae + ab illo inventore veritatis et quasi architecto beatae vitae dicta + sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit + aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui + dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed + quia non numquam eius modi tempora incidunt ut labore et dolore magnam + aliquam quaerat voluptatem. +

+

+ Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis + suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis + autem vel eum iure reprehenderit qui in ea voluptate velit esse quam + nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo + voluptas nulla pariatur? +

+
+
+ ); +}; + +export { Entrega }; diff --git a/desafio-react-e-typescript/src/components/Body/Tabs/FormaDePagamento.tsx b/desafio-react-e-typescript/src/components/Body/Tabs/FormaDePagamento.tsx new file mode 100644 index 0000000..76a47af --- /dev/null +++ b/desafio-react-e-typescript/src/components/Body/Tabs/FormaDePagamento.tsx @@ -0,0 +1,42 @@ +import React from "react"; + +import styles from "../Body.module.scss"; + +const Pagamento = () => { + return ( +
+
+

Forma de Pagamento

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae + ab illo inventore veritatis et quasi architecto beatae vitae dicta + sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit + aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui + dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed + quia non numquam eius modi tempora incidunt ut labore et dolore magnam + aliquam quaerat voluptatem. +

+

+ Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis + suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis + autem vel eum iure reprehenderit qui in ea voluptate velit esse quam + nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo + voluptas nulla pariatur? +

+
+
+ ); +}; + +export { Pagamento }; diff --git a/desafio-react-e-typescript/src/components/Body/Tabs/SegurancaEPrivacidade.tsx b/desafio-react-e-typescript/src/components/Body/Tabs/SegurancaEPrivacidade.tsx new file mode 100644 index 0000000..5511742 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Body/Tabs/SegurancaEPrivacidade.tsx @@ -0,0 +1,42 @@ +import React from "react"; + +import styles from "../Body.module.scss"; + +const Seguranca = () => { + return ( +
+
+

Segurança e Privacidade

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae + ab illo inventore veritatis et quasi architecto beatae vitae dicta + sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit + aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui + dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed + quia non numquam eius modi tempora incidunt ut labore et dolore magnam + aliquam quaerat voluptatem. +

+

+ Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis + suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis + autem vel eum iure reprehenderit qui in ea voluptate velit esse quam + nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo + voluptas nulla pariatur? +

+
+
+ ); +}; + +export { Seguranca }; diff --git a/desafio-react-e-typescript/src/components/Body/Tabs/Sobre.tsx b/desafio-react-e-typescript/src/components/Body/Tabs/Sobre.tsx new file mode 100644 index 0000000..d22afba --- /dev/null +++ b/desafio-react-e-typescript/src/components/Body/Tabs/Sobre.tsx @@ -0,0 +1,43 @@ +import React from "react"; + +import styles from "../Body.module.scss"; + +const Sobre = () => { + return ( +
+
+

Sobre

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae + ab illo inventore veritatis et quasi architecto beatae vitae dicta + sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit + aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui + dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed + quia non numquam eius modi tempora incidunt ut labore et dolore magnam + aliquam quaerat voluptatem. +

+

+ Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis + suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis + autem vel eum iure reprehenderit qui in ea voluptate velit esse quam + nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo + voluptas nulla pariatur? +

+
+
+ ); +}; + +export { Sobre }; diff --git a/desafio-react-e-typescript/src/components/Body/Tabs/TabDisposition.tsx b/desafio-react-e-typescript/src/components/Body/Tabs/TabDisposition.tsx new file mode 100644 index 0000000..84e7a3a --- /dev/null +++ b/desafio-react-e-typescript/src/components/Body/Tabs/TabDisposition.tsx @@ -0,0 +1,46 @@ +import React, { useEffect, useState } from "react"; + +import styles from "../Body.module.scss"; + +interface MenuValue { + title: string; + component: JSX.Element; +} + +export interface TabDispositionProps { + tabs: MenuValue[]; +} + +const TabDisposition: React.FC = ({ tabs }) => { + const [selectecTab, setselectedTab] = useState(); + useEffect(() => { + setselectedTab(tabs[0]); + }, [tabs]); + const handleClick = (tab: MenuValue) => { + setselectedTab(tab); + }; + return ( + <> +
    + {tabs.map((tab, index) => { + return ( +
  • { + handleClick(tab); + }} + className={ + tabs.indexOf(selectecTab!) === index ? styles["active"] : "" + } + > + {tab.title} +
    • + ); + })} +
+
{selectecTab?.component}
+ + ); +}; + +export { TabDisposition }; diff --git a/desafio-react-e-typescript/src/components/Body/Tabs/TabDispositionItems.js b/desafio-react-e-typescript/src/components/Body/Tabs/TabDispositionItems.js new file mode 100644 index 0000000..6ee1c58 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Body/Tabs/TabDispositionItems.js @@ -0,0 +1,35 @@ +import { Sobre } from "./Sobre"; +import { Pagamento } from "./FormaDePagamento"; +import { Entrega } from "./Entrega"; +import { Troca } from "./TrocaEDevolucao"; +import { Seguranca } from "./SegurancaEPrivacidade"; +import { Contato } from "./Contato"; + +const TabsContents = [ + { + title: "Sobre", + component: , + }, + { + title: "Forma de Pagamento", + component: , + }, + { + title: "Entrega", + component: , + }, + { + title: "Troca e Devolução", + component: , + }, + { + title: "Segurança e Privacidade", + component: , + }, + { + title: "Contato", + component: , + }, +]; + +export { TabsContents }; diff --git a/desafio-react-e-typescript/src/components/Body/Tabs/TrocaEDevolucao.tsx b/desafio-react-e-typescript/src/components/Body/Tabs/TrocaEDevolucao.tsx new file mode 100644 index 0000000..bc3a3e8 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Body/Tabs/TrocaEDevolucao.tsx @@ -0,0 +1,42 @@ +import React from "react"; + +import styles from "../Body.module.scss"; + +const Troca = () => { + return ( +
+
+

Troca e Devolução

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae + ab illo inventore veritatis et quasi architecto beatae vitae dicta + sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit + aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui + dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed + quia non numquam eius modi tempora incidunt ut labore et dolore magnam + aliquam quaerat voluptatem. +

+

+ Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis + suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis + autem vel eum iure reprehenderit qui in ea voluptate velit esse quam + nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo + voluptas nulla pariatur? +

+
+
+ ); +}; + +export { Troca }; diff --git a/desafio-react-e-typescript/src/pages/Home.tsx b/desafio-react-e-typescript/src/pages/Home.tsx index 70bc1c5..5d9ab0d 100644 --- a/desafio-react-e-typescript/src/pages/Home.tsx +++ b/desafio-react-e-typescript/src/pages/Home.tsx @@ -1,12 +1,14 @@ import React from "react"; import { Header } from "../components/Header/Header"; +import { Body } from "../components/Body/Body"; import { Footer } from "../components/Footer/Footer"; const Home = () => { return (
+
); From d45a5c9e527568463b9528d4e2cb4ea46e3dc157 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 20 Jan 2023 19:47:39 -0300 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20adiciona=20o=20formul=C3=A1rio,=20e?= =?UTF-8?q?stiliza=C3=A7=C3=A3o,=20responsividade=20=20e=20schema?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- desafio-react-e-typescript/package.json | 4 +- .../src/components/Body/Body.module.scss | 193 ++++++++++++++---- .../src/components/Body/Tabs/Contato.tsx | 126 +++++++++++- .../src/components/Footer/Footer.tsx | 18 +- desafio-react-e-typescript/src/global.css | 1 + .../src/schema/FormSchema.ts | 30 +++ desafio-react-e-typescript/yarn.lock | 79 ++++++- 7 files changed, 401 insertions(+), 50 deletions(-) create mode 100644 desafio-react-e-typescript/src/schema/FormSchema.ts diff --git a/desafio-react-e-typescript/package.json b/desafio-react-e-typescript/package.json index ece6667..2ad8933 100644 --- a/desafio-react-e-typescript/package.json +++ b/desafio-react-e-typescript/package.json @@ -10,12 +10,14 @@ "@types/node": "^16.18.11", "@types/react": "^18.0.27", "@types/react-dom": "^18.0.10", + "formik": "^2.2.9", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "sass": "^1.57.1", "typescript": "^4.9.4", - "web-vitals": "^2.1.4" + "web-vitals": "^2.1.4", + "yup": "^0.32.11" }, "scripts": { "start": "react-scripts start", diff --git a/desafio-react-e-typescript/src/components/Body/Body.module.scss b/desafio-react-e-typescript/src/components/Body/Body.module.scss index 4e23800..98644dd 100644 --- a/desafio-react-e-typescript/src/components/Body/Body.module.scss +++ b/desafio-react-e-typescript/src/components/Body/Body.module.scss @@ -95,64 +95,185 @@ } } - .menu-list-container > div { - width: 100%; - } - - .description-container { - padding-top: 10px; - margin: 0px 0px 0px 30px; + .form-wrapper { + max-height: 100vh; + margin-left: 30px; @media screen and (max-width: 1024px) { - padding: unset; margin: unset; } h2 { - font-family: "Roboto", sans-serif; - font-weight: 700; - font-size: 24px; - line-height: 28px; - color: #292929; margin-bottom: 12px; - @media screen and (min-width: 2500px) { - font-size: 48px; - line-height: 56px; - margin: unset; - margin-bottom: 12px; - } - @media screen and (max-width: 1024px) { - text-align: center; margin-top: 30px; - margin-bottom: 12px; + text-align: center; } } - p { - font-family: "Roboto", sans-serif; - font-size: 13px; - line-height: 15px; - color: #7d7d7d; - margin-bottom: 20px; + form { + width: 100%; + } - @media screen and (min-width: 2500px) { - font-size: 26px; - line-height: 30px; + .form-col { + position: relative; + display: flex; + flex-direction: column; + margin-bottom: 12px; + + label { + font-family: "Roboto", sans-serif; + font-size: 14px; + line-height: 16px; + color: #100d0e; + margin: 0 0 12px 15px; } - @media screen and (max-width: 1024px) { + input { + height: 46px; + border: 1px solid black; + border-radius: 25px; + padding: 15px 0px 15px 20px; + + &::placeholder { + font-family: "Roboto", sans-serif; + font-size: 14px; + line-height: 16px; + color: #b9b7b7; + } + } + .form-invalid-feedback { + position: absolute; + right: 0; + margin-right: 20px; + font-weight: 400; font-size: 12px; - line-height: 18px; + line-height: 14px; + text-align: right; + color: #ff0000; } } - .description-parag { - @media screen and (max-width: 1024px) { - display: none; + .form-terms { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 12px; + + label { + display: flex; + align-items: center; + margin-right: 4px; + + span { + color: red; + margin-right: 3.5px; + } + + a { + text-decoration: none; + color: #100d0e; + h3 { + font-family: "Roboto", sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 16px; + text-decoration: underline; + } + } + input { + width: 18px; + height: 18px; + } } } + + button { + width: 100%; + height: 52px; + border: 1px solid black; + border-radius: 25px; + background-color: black; + color: white; + font-family: "Roboto", sans-serif; + font-size: 16px; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; + cursor: pointer; + + &:hover { + filter: brightness(80%); + } + } + } + + .form-success { + font-family: "Roboto", sans-serif; + font-size: 12px; + line-height: 14px; + color: #008000; + } + } + + .menu-list-container > div { + width: 100%; + } + + .description-container { + padding-top: 10px; + margin: 0px 0px 0px 30px; + + @media screen and (max-width: 1024px) { + padding: unset; + margin: unset; + } + + h2 { + font-family: "Roboto", sans-serif; + font-weight: 700; + font-size: 24px; + line-height: 28px; + color: #292929; + margin-bottom: 12px; + + @media screen and (min-width: 2500px) { + font-size: 48px; + line-height: 56px; + margin: unset; + margin-bottom: 12px; + } + + @media screen and (max-width: 1024px) { + text-align: center; + margin-top: 30px; + margin-bottom: 12px; + } + } + + p { + font-family: "Roboto", sans-serif; + font-size: 13px; + line-height: 15px; + color: #7d7d7d; + margin-bottom: 20px; + + @media screen and (min-width: 2500px) { + font-size: 26px; + line-height: 30px; + } + + @media screen and (max-width: 1024px) { + font-size: 12px; + line-height: 18px; + } + } + + .description-parag { + @media screen and (max-width: 1024px) { + display: none; + } } } } diff --git a/desafio-react-e-typescript/src/components/Body/Tabs/Contato.tsx b/desafio-react-e-typescript/src/components/Body/Tabs/Contato.tsx index bb4c1e0..3dbab12 100644 --- a/desafio-react-e-typescript/src/components/Body/Tabs/Contato.tsx +++ b/desafio-react-e-typescript/src/components/Body/Tabs/Contato.tsx @@ -1,7 +1,129 @@ -import React from "react"; +import React, { useState } from "react"; + +import styles from "../Body.module.scss"; + +import { Formik, Form, Field, ErrorMessage } from "formik"; +import FormSchema from "../../../schema/FormSchema"; + +interface IFormikValues { + name: string; + email: string; + cpf: string; + nascimento: string; + telefone: string; + instagram: string; + terms: string; +} + +const initialValues = { + name: "", + email: "", + cpf: "", + nascimento: "", + telefone: "", + instagram: "", + terms: "", +}; const Contato = () => { - return
; + const handleFormikSubmit = (values: IFormikValues) => {}; + const [success, isSuccess] = useState(false); + return ( +
+ { + handleFormikSubmit(values); + resetForm(); + isSuccess(true); + }} + initialValues={initialValues} + validationSchema={FormSchema} + > + { +
+

Preencha o Formulário

+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+ + + {success && ( + + *Formulário enviado com sucesso! + + )} +
+ } + +
+ ); }; export { Contato }; diff --git a/desafio-react-e-typescript/src/components/Footer/Footer.tsx b/desafio-react-e-typescript/src/components/Footer/Footer.tsx index 0e55425..35cce51 100644 --- a/desafio-react-e-typescript/src/components/Footer/Footer.tsx +++ b/desafio-react-e-typescript/src/components/Footer/Footer.tsx @@ -1,17 +1,13 @@ import React, { useState, useEffect } from "react"; import { Newsletter } from "../Newsletter/Newsletter"; -import { Accordion } from "../Footer/Accordion/Accordion"; - -import styles from "./Footer.module.scss"; +import { Accordion } from "./Accordion/Accordion"; import facebook from "../../assets/images/facebookicon.svg"; import instagram from "../../assets/images/instagramicon.svg"; import twitter from "../../assets/images/twittericon.svg"; import youtube from "../../assets/images/youtubeicon.svg"; import linkedin from "../../assets/images/linkedinicon.svg"; -import whatsapp from "../../assets/images/whatsappicon.svg"; -import gototop from "../../assets/images/gotopicon.svg"; import mastercard from "../../assets/images/mastericon.svg"; import visa from "../../assets/images/visaicon.svg"; import diners from "../../assets/images/dinersicon.svg"; @@ -20,8 +16,12 @@ import hiper from "../../assets/images/hipericon.svg"; import pagseguro from "../../assets/images/pagseguroicon.svg"; import boleto from "../../assets/images/boletoicon.svg"; import vtex from "../../assets/images/vtexicon.svg"; +import whatsapp from "../../assets/images/whatsappicon.svg"; import vtexpowered from "../../assets/images/vtexpowered.svg"; import m3developed from "../../assets/images/m3developed.svg"; +import gototop from "../../assets/images/gotopicon.svg"; + +import styles from "./Footer.module.scss"; const Footer = () => { const [visible, setVisible] = useState(false); @@ -162,9 +162,11 @@ const Footer = () => { diff --git a/desafio-react-e-typescript/src/global.css b/desafio-react-e-typescript/src/global.css index 9a42635..d9366e2 100644 --- a/desafio-react-e-typescript/src/global.css +++ b/desafio-react-e-typescript/src/global.css @@ -1,3 +1,4 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"); * { box-sizing: border-box; padding: 0; diff --git a/desafio-react-e-typescript/src/schema/FormSchema.ts b/desafio-react-e-typescript/src/schema/FormSchema.ts new file mode 100644 index 0000000..db86991 --- /dev/null +++ b/desafio-react-e-typescript/src/schema/FormSchema.ts @@ -0,0 +1,30 @@ +import * as Yup from "yup"; + +export default Yup.object().shape({ + name: Yup.string() + .required("*Campo Obrigatório") + .min(3, "Insira um nome válido"), + email: Yup.string() + .matches( + /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/, + "E-mail Inválido" + ) + .required("*Campo Obrigatório"), + cpf: Yup.string() + .matches(/^(?:\d{3}\.){2}\d{3}-?\d{2}$/, "CPF inválido") + .required("*Campo obrigatório"), + nascimento: Yup.string() + .matches( + /^(?:0[1-9]|[12]\d|3[01])([/.-])(?:0[1-9]|1[012])\1(?:19|20)\d\d$/, + "Data de Nascimento inválida" + ) + .required("*Campo Obrigatório"), + telefone: Yup.string() + .matches(/^(\d{2})\D*(\d{5}|\d{4})\D*(\d{4})$/, "Número Inválido") + .required("*Campo Obrigatório"), + instagram: Yup.string().matches( + /(?:@)(\w(?:(?:\w|(?:\.(?!\.))){0,28}(?:\w))?)/, + "Nome de usuário não é valido" + ), + terms: Yup.boolean().oneOf([true], "você deve aceitar os termos").required(), +}); diff --git a/desafio-react-e-typescript/yarn.lock b/desafio-react-e-typescript/yarn.lock index 4e187af..875aa26 100644 --- a/desafio-react-e-typescript/yarn.lock +++ b/desafio-react-e-typescript/yarn.lock @@ -1029,7 +1029,7 @@ "@babel/helper-validator-option" "^7.18.6" "@babel/plugin-transform-typescript" "^7.18.6" -"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": version "7.20.7" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd" integrity sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ== @@ -1979,6 +1979,11 @@ resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ== +"@types/lodash@^4.14.175": + version "4.14.191" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.191.tgz#09511e7f7cba275acd8b419ddac8da9a6a79e2fa" + integrity sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ== + "@types/mime@*": version "3.0.1" resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10" @@ -3545,6 +3550,11 @@ deep-is@^0.1.3, deep-is@~0.1.3: resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831" integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ== +deepmerge@^2.1.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170" + integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA== + deepmerge@^4.2.2: version "4.2.2" resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955" @@ -4504,6 +4514,19 @@ form-data@^3.0.0: combined-stream "^1.0.8" mime-types "^2.1.12" +formik@^2.2.9: + version "2.2.9" + resolved "https://registry.yarnpkg.com/formik/-/formik-2.2.9.tgz#8594ba9c5e2e5cf1f42c5704128e119fc46232d0" + integrity sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA== + dependencies: + deepmerge "^2.1.1" + hoist-non-react-statics "^3.3.0" + lodash "^4.17.21" + lodash-es "^4.17.21" + react-fast-compare "^2.0.1" + tiny-warning "^1.0.2" + tslib "^1.10.0" + forwarded@0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811" @@ -4778,6 +4801,13 @@ he@^1.2.0: resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== +hoist-non-react-statics@^3.3.0: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + hoopy@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d" @@ -6087,6 +6117,11 @@ locate-path@^6.0.0: dependencies: p-locate "^5.0.0" +lodash-es@^4.17.21: + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee" + integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw== + lodash.debounce@^4.0.8: version "4.0.8" resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" @@ -6309,6 +6344,11 @@ multicast-dns@^7.2.5: dns-packet "^5.2.2" thunky "^1.0.2" +nanoclone@^0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/nanoclone/-/nanoclone-0.2.1.tgz#dd4090f8f1a110d26bb32c49ed2f5b9235209ed4" + integrity sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA== + nanoid@^3.3.4: version "3.3.4" resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab" @@ -7347,6 +7387,11 @@ prop-types@^15.8.1: object-assign "^4.1.1" react-is "^16.13.1" +property-expr@^2.0.4: + version "2.0.5" + resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.5.tgz#278bdb15308ae16af3e3b9640024524f4dc02cb4" + integrity sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA== + proxy-addr@~2.0.7: version "2.0.7" resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025" @@ -7476,7 +7521,12 @@ react-error-overlay@^6.0.11: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb" integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg== -react-is@^16.13.1: +react-fast-compare@^2.0.1: + version "2.0.4" + resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" + integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== + +react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -8484,6 +8534,11 @@ thunky@^1.0.2: resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d" integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA== +tiny-warning@^1.0.2: + version "1.0.3" + resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" + integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== + tmpl@1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc" @@ -8506,6 +8561,11 @@ toidentifier@1.0.1: resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35" integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA== +toposort@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330" + integrity sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg== + tough-cookie@^4.0.0: version "4.1.2" resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.2.tgz#e53e84b85f24e0b65dd526f46628db6c85f6b874" @@ -8545,7 +8605,7 @@ tsconfig-paths@^3.14.1: minimist "^1.2.6" strip-bom "^3.0.0" -tslib@^1.8.1: +tslib@^1.10.0, tslib@^1.8.1: version "1.14.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== @@ -9279,3 +9339,16 @@ yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== + +yup@^0.32.11: + version "0.32.11" + resolved "https://registry.yarnpkg.com/yup/-/yup-0.32.11.tgz#d67fb83eefa4698607982e63f7ca4c5ed3cf18c5" + integrity sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg== + dependencies: + "@babel/runtime" "^7.15.4" + "@types/lodash" "^4.14.175" + lodash "^4.17.21" + lodash-es "^4.17.21" + nanoclone "^0.2.1" + property-expr "^2.0.4" + toposort "^2.0.2" From 0a47ff7f250c6c2c779ce708a865b69fcccb15fe Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 20 Jan 2023 23:13:00 -0300 Subject: [PATCH 3/4] fix: ajusta margin do footer para o galaxy fold --- desafio-react-e-typescript/package.json | 1 + desafio-react-e-typescript/src/App.js | 6 ++++++ desafio-react-e-typescript/src/Routes.js | 18 +++++++++++++++++ .../src/components/Footer/Footer.module.scss | 8 ++++++++ desafio-react-e-typescript/yarn.lock | 20 +++++++++++++++++++ 5 files changed, 53 insertions(+) create mode 100644 desafio-react-e-typescript/src/App.js create mode 100644 desafio-react-e-typescript/src/Routes.js diff --git a/desafio-react-e-typescript/package.json b/desafio-react-e-typescript/package.json index 2ad8933..30067eb 100644 --- a/desafio-react-e-typescript/package.json +++ b/desafio-react-e-typescript/package.json @@ -13,6 +13,7 @@ "formik": "^2.2.9", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.7.0", "react-scripts": "5.0.1", "sass": "^1.57.1", "typescript": "^4.9.4", diff --git a/desafio-react-e-typescript/src/App.js b/desafio-react-e-typescript/src/App.js new file mode 100644 index 0000000..90ea238 --- /dev/null +++ b/desafio-react-e-typescript/src/App.js @@ -0,0 +1,6 @@ +import React from "react"; +import Routes from "./Routes"; + +export default function App() { + return ; +} diff --git a/desafio-react-e-typescript/src/Routes.js b/desafio-react-e-typescript/src/Routes.js new file mode 100644 index 0000000..e352a34 --- /dev/null +++ b/desafio-react-e-typescript/src/Routes.js @@ -0,0 +1,18 @@ +import React from "react"; +import { Route, BrowserRouter } from "react-router-dom"; + +import Home from "./pages/Home"; +import Sobre from "./components/Body/Tabs/Sobre"; +import Usuario from "./Usuario"; + +const Routes = () => { + return ( + + + + + + ); +}; + +export default Routes; diff --git a/desafio-react-e-typescript/src/components/Footer/Footer.module.scss b/desafio-react-e-typescript/src/components/Footer/Footer.module.scss index 0f3587c..51b8f14 100644 --- a/desafio-react-e-typescript/src/components/Footer/Footer.module.scss +++ b/desafio-react-e-typescript/src/components/Footer/Footer.module.scss @@ -210,12 +210,20 @@ width: 22%; min-width: 234px; } + + @media screen and (max-width: 375px) { + margin: unset; + } } .cards { display: flex; align-items: center; + @media screen and (max-width: 375px) { + display: block; + } + .icons { width: 36px; height: 20px; diff --git a/desafio-react-e-typescript/yarn.lock b/desafio-react-e-typescript/yarn.lock index 875aa26..f27c8a7 100644 --- a/desafio-react-e-typescript/yarn.lock +++ b/desafio-react-e-typescript/yarn.lock @@ -1568,6 +1568,11 @@ schema-utils "^3.0.0" source-map "^0.7.3" +"@remix-run/router@1.3.0": + version "1.3.0" + resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.3.0.tgz#b6ee542c7f087b73b3d8215b9bf799f648be71cb" + integrity sha512-nwQoYb3m4DDpHTeOwpJEuDt8lWVcujhYYSFGLluC+9es2PyLjm+jjq3IeRBQbwBtPLJE/lkuHuGHr8uQLgmJRA== + "@rollup/plugin-babel@^5.2.0": version "5.3.1" resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283" @@ -7546,6 +7551,21 @@ react-refresh@^0.11.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A== +react-router-dom@^6.7.0: + version "6.7.0" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.7.0.tgz#0249f4ca4eb704562b8b0ff29caeb928c3a6ed38" + integrity sha512-jQtXUJyhso3kFw430+0SPCbmCmY1/kJv8iRffGHwHy3CkoomGxeYzMkmeSPYo6Egzh3FKJZRAL22yg5p2tXtfg== + dependencies: + "@remix-run/router" "1.3.0" + react-router "6.7.0" + +react-router@6.7.0: + version "6.7.0" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.7.0.tgz#db262684c13b5c2970694084ae9e8531718a0681" + integrity sha512-KNWlG622ddq29MAM159uUsNMdbX8USruoKnwMMQcs/QWZgFUayICSn2oB7reHce1zPj6CG18kfkZIunSSRyGHg== + dependencies: + "@remix-run/router" "1.3.0" + react-scripts@5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003" From 87d13d5e912fc203bf2db5f69c9affd8ce7d792a Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 20 Jan 2023 23:50:42 -0300 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20adiciona=20rotas=20do=20menu=20e=20?= =?UTF-8?q?conserta=20caminhos=20e=20disposi=C3=A7=C3=A3o=20de=20pastas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- desafio-react-e-typescript/src/App.js | 6 -- desafio-react-e-typescript/src/Routes.js | 18 ------ .../src/components/Body/Body.module.scss | 56 ++++++++++--------- .../src/components/Body/Body.tsx | 40 ++++++++++++- .../components/Body/Tabs/TabDisposition.tsx | 28 +++++----- .../Body/Tabs/TabDispositionItems.js | 35 ------------ .../src/components/Footer/Footer.tsx | 2 +- desafio-react-e-typescript/src/index.tsx | 7 ++- 8 files changed, 90 insertions(+), 102 deletions(-) delete mode 100644 desafio-react-e-typescript/src/App.js delete mode 100644 desafio-react-e-typescript/src/Routes.js delete mode 100644 desafio-react-e-typescript/src/components/Body/Tabs/TabDispositionItems.js diff --git a/desafio-react-e-typescript/src/App.js b/desafio-react-e-typescript/src/App.js deleted file mode 100644 index 90ea238..0000000 --- a/desafio-react-e-typescript/src/App.js +++ /dev/null @@ -1,6 +0,0 @@ -import React from "react"; -import Routes from "./Routes"; - -export default function App() { - return ; -} diff --git a/desafio-react-e-typescript/src/Routes.js b/desafio-react-e-typescript/src/Routes.js deleted file mode 100644 index e352a34..0000000 --- a/desafio-react-e-typescript/src/Routes.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from "react"; -import { Route, BrowserRouter } from "react-router-dom"; - -import Home from "./pages/Home"; -import Sobre from "./components/Body/Tabs/Sobre"; -import Usuario from "./Usuario"; - -const Routes = () => { - return ( - - - - - - ); -}; - -export default Routes; diff --git a/desafio-react-e-typescript/src/components/Body/Body.module.scss b/desafio-react-e-typescript/src/components/Body/Body.module.scss index 98644dd..a9e3f63 100644 --- a/desafio-react-e-typescript/src/components/Body/Body.module.scss +++ b/desafio-react-e-typescript/src/components/Body/Body.module.scss @@ -58,35 +58,39 @@ height: 224px; } - li { - width: 100%; - max-width: 302px; - height: 39px; - padding: 10px 16px; - font-family: "Roboto", sans-serif; - font-weight: 400; - font-size: 16px; - line-height: 19px; - color: #7d7d7d; - cursor: pointer; + a { + text-decoration: none; - @media screen and (min-width: 2500px) { - max-width: 590px; - height: 58px; - font-size: 32px; - line-height: 38px; - margin-bottom: 10px; - } - - @media screen and (max-width: 1024px) { + li { width: 100%; - } - } + max-width: 302px; + height: 39px; + padding: 10px 16px; + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: #7d7d7d; + cursor: pointer; - li.active { - color: white; - background-color: black; - max-width: unset; + @media screen and (min-width: 2500px) { + max-width: 590px; + height: 58px; + font-size: 32px; + line-height: 38px; + margin-bottom: 10px; + } + + @media screen and (max-width: 1024px) { + width: 100%; + } + } + + li.active { + color: white; + background-color: black; + max-width: unset; + } } .menu-list-sobre { diff --git a/desafio-react-e-typescript/src/components/Body/Body.tsx b/desafio-react-e-typescript/src/components/Body/Body.tsx index 5a711cf..9ac345f 100644 --- a/desafio-react-e-typescript/src/components/Body/Body.tsx +++ b/desafio-react-e-typescript/src/components/Body/Body.tsx @@ -1,11 +1,38 @@ import React from "react"; +import { Route, Routes } from "react-router-dom"; import styles from "./Body.module.scss"; import { BreadCrumb } from "./BreadCrumb/BreadCrumb"; import { TabDisposition } from "./Tabs/TabDisposition"; -import { TabsContents } from "./Tabs/TabDispositionItems"; +import { Sobre } from "../Body/Tabs/Sobre"; const Body = () => { + const TabsContents = [ + { + title: "Sobre", + path: "sobre", + }, + { + title: "Forma de Pagamento", + path: "pagamento", + }, + { + title: "Entrega", + path: "entrega", + }, + { + title: "Troca e Devolução", + path: "troca", + }, + { + title: "Segurança e Privacidade", + path: "seguranca", + }, + { + title: "Contato", + path: "contato", + }, + ]; return (
@@ -13,7 +40,16 @@ const Body = () => {
- +
+ + } /> + } /> + } /> + } /> + } /> + } /> + +
diff --git a/desafio-react-e-typescript/src/components/Body/Tabs/TabDisposition.tsx b/desafio-react-e-typescript/src/components/Body/Tabs/TabDisposition.tsx index 84e7a3a..09319fe 100644 --- a/desafio-react-e-typescript/src/components/Body/Tabs/TabDisposition.tsx +++ b/desafio-react-e-typescript/src/components/Body/Tabs/TabDisposition.tsx @@ -1,10 +1,11 @@ import React, { useEffect, useState } from "react"; +import { Link } from "react-router-dom"; import styles from "../Body.module.scss"; interface MenuValue { title: string; - component: JSX.Element; + path: string; } export interface TabDispositionProps { @@ -24,21 +25,22 @@ const TabDisposition: React.FC = ({ tabs }) => {
    {tabs.map((tab, index) => { return ( -
  • { - handleClick(tab); - }} - className={ - tabs.indexOf(selectecTab!) === index ? styles["active"] : "" - } - > - {tab.title} -
    • + +
  • { + handleClick(tab); + }} + className={ + tabs.indexOf(selectecTab!) === index ? styles["active"] : "" + } + > + {tab.title} +
    • + ); })}
-
{selectecTab?.component}
); }; diff --git a/desafio-react-e-typescript/src/components/Body/Tabs/TabDispositionItems.js b/desafio-react-e-typescript/src/components/Body/Tabs/TabDispositionItems.js deleted file mode 100644 index 6ee1c58..0000000 --- a/desafio-react-e-typescript/src/components/Body/Tabs/TabDispositionItems.js +++ /dev/null @@ -1,35 +0,0 @@ -import { Sobre } from "./Sobre"; -import { Pagamento } from "./FormaDePagamento"; -import { Entrega } from "./Entrega"; -import { Troca } from "./TrocaEDevolucao"; -import { Seguranca } from "./SegurancaEPrivacidade"; -import { Contato } from "./Contato"; - -const TabsContents = [ - { - title: "Sobre", - component: , - }, - { - title: "Forma de Pagamento", - component: , - }, - { - title: "Entrega", - component: , - }, - { - title: "Troca e Devolução", - component: , - }, - { - title: "Segurança e Privacidade", - component: , - }, - { - title: "Contato", - component: , - }, -]; - -export { TabsContents }; diff --git a/desafio-react-e-typescript/src/components/Footer/Footer.tsx b/desafio-react-e-typescript/src/components/Footer/Footer.tsx index 35cce51..351f522 100644 --- a/desafio-react-e-typescript/src/components/Footer/Footer.tsx +++ b/desafio-react-e-typescript/src/components/Footer/Footer.tsx @@ -204,7 +204,7 @@ const Footer = () => {