feat: criação da função que observa o tamanho de tela e seleciona os componentes desktop ou mobile

desafio-react-e-typescript/src/App.scss

@@ -1,3 +1,7 @@
+body {
+  margin: 0;
+}
+
 .Container-menu {
   display: flex;
 

desafio-react-e-typescript/src/App.tsx

@@ -1,12 +1,43 @@
+import React, { useState, useEffect } from "react";
+
 import { Router } from "./router";
 import "./App.scss";
 
+import { HeaderDesktop } from "./components/HeaderDesktop";
+
+export function ScreenSize() {
+  const [windowDimenion, detectHW] = useState({
+    winWidth: window.innerWidth,
+  });
+
+  const detectSize = () => {
+    detectHW({
+      winWidth: window.innerWidth,
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener("resize", detectSize);
+
+    return () => {
+      window.removeEventListener("resize", detectSize);
+    };
+  }, [windowDimenion]);
+
+  return window.innerWidth > 1024 ? <HeaderDesktop /> : <h3> Hello World !</h3>;
+}
+
 export const App = () => {
   return (
-    <>
-      <section className="Container-menu">
-        <Router />
-      </section>
-    </>
+    ScreenSize(),
+    (
+      <>
+        {window.innerWidth > 1024 ? <HeaderDesktop /> : <h3> Hello World !</h3>}
+
+        <section className="Container-menu">
+          <Router />
+        </section>
+      </>
+    )
   );
 };

desafio-react-e-typescript/src/components/ContactForm.tsx

@@ -1,4 +1,4 @@
-import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik";
+import { Formik, Form, Field, ErrorMessage } from "formik";
 import FormSchema from "../schema/FormSchema";
 
 interface IFormikValues {
@@ -35,43 +35,55 @@ export const ContactForm = () => {
       {({ errors, touched }) => (
         <Form>
           <h2>Preencha o formulário </h2>
+
           <label htmlFor="name">Nome</label>
           <Field
             id="name"
             name="name"
+            placeholder="Seu nome completo"
             className={errors.name && touched.name && "invalid"}
           />
           <ErrorMessage name="name" className="form-ivalid-feedback" />
           <label htmlFor="email">E-mail</label>
+
           <Field
             id="email"
             name="email"
+            placeholder="Seu e-mail"
             className={errors.email && touched.email && "invalid"}
           />
           <ErrorMessage name="email" className="form-ivalid-feedback" />
           <label htmlFor="cpf">CPF</label>
+
           <Field
             id="cpf"
             name="cpf"
+            placeholder="000.000.000-00"
             className={errors.cpf && touched.cpf && "invalid"}
           />
           <ErrorMessage name="cpf" className="form-ivalid-feedback" />
           <label htmlFor="data">Data de Nascimento:</label>
+
           <Field
             id="data"
             name="data"
+            placeholder="00.00.0000"
             className={errors.data && touched.data && "invalid"}
           />
           <ErrorMessage name="data" className="form-ivalid-feedback" />
+
           <label htmlFor="telefone">Telefone:</label>
           <Field
             id="telefone"
             name="telefone"
+            type="tel"
+            placeholder="(00) 00000-0000"
             className={errors.telefone && touched.telefone && "invalid"}
           />
           <ErrorMessage name="telefone" className="form-ivalid-feedback" />
+
           <label htmlFor="instagram">Instagram</label>
-          <Field id="instagram" name="instagram" />
+          <Field id="instagram" name="instagram" placeholder="@seuuser" />
           <ErrorMessage name="instagram" className="form-ivalid-feedback" />
           <div>
             <label htmlFor="checkbox">Declaro que li e aceito</label>

desafio-react-e-typescript/src/components/HeaderDesktop.modules.scss

@@ -0,0 +1,24 @@
+.Header {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 100px;
+  background: #000000;
+
+  .Search_Header_wrapper {
+    width: 100%;
+    .Search_Header {
+      width: 100%;
+    }
+  }
+
+  @media (min-width: 1025px) {
+    padding: 22px 100px;
+
+    .Search_Header_wrapper {
+      width: 100%;
+      .Search_Header {
+        width: 100%;
+      }
+    }
+  }
+}

desafio-react-e-typescript/src/components/HeaderDesktop.tsx

@@ -0,0 +1,28 @@
+import { NavLink } from "react-router-dom";
+import LogoM3 from "../assets/imgs/pngs/Logo-M3Academy.png";
+import CartIcon from "../assets/imgs/pngs/cart.png";
+
+import "./HeaderDesktop.modules.scss";
+
+export const HeaderDesktop = () => {
+  return (
+    <>
+      <section className="Header">
+        <div>
+          <NavLink to={"/"}>
+            <img src={LogoM3} alt="LogoM3" className="M3Logo" />
+          </NavLink>
+        </div>
+        <div className="Search_Header_wrapper">
+          <input readOnly className="Search_Header" placeholder="Buscar..." />
+        </div>
+        <div>
+          <NavLink to={"/"}> ENTRAR </NavLink>
+          <NavLink to={"/"}>
+            <img src={CartIcon} alt="CartIcon" className="CartIcon" />
+          </NavLink>
+        </div>
+      </section>
+    </>
+  );
+};

desafio-react-e-typescript/src/components/Navegation.modules.scss

@@ -1,4 +1,4 @@
-.Menu-routes {
+.MenuRoutes {
   padding: 0 16px;
 
   @media (min-width: 1025px) {

desafio-react-e-typescript/src/components/Navegation.tsx

@@ -1,28 +1,28 @@
-import { Link } from "react-router-dom";
-import "./Navegation.scss";
+import { NavLink } from "react-router-dom";
+import "./Navegation.modules.scss";
 
 export const Navegation = () => {
   return (
     <>
-      <nav className="Menu-routes">
+      <nav className="MenuRoutes">
         <ul>
           <li>
-            <Link to={"/"}> Sobre </Link>
+            <NavLink to={"/"}> Sobre </NavLink>
           </li>
           <li>
-            <Link to={"/Pagamentos"}> Formas de Pagamento</Link>
+            <NavLink to={"/Pagamentos"}> Formas de Pagamento</NavLink>
           </li>
           <li>
-            <Link to={"/Entrega"}> Entrega </Link>
+            <NavLink to={"/Entrega"}> Entrega </NavLink>
           </li>
           <li>
-            <Link to={"/Devolução"}> Troca e Devolução </Link>
+            <NavLink to={"/Devolução"}> Troca e Devolução </NavLink>
           </li>
           <li>
-            <Link to={"/Segurança"}> Segurança e Privacidade</Link>
+            <NavLink to={"/Segurança"}> Segurança e Privacidade</NavLink>
           </li>
           <li>
-            <Link to={"/Contatos"}> Contatos</Link>
+            <NavLink to={"/Contatos"}> Contatos</NavLink>
           </li>
         </ul>
       </nav>

desafio-react-e-typescript/src/pages/About.tsx

@@ -1,3 +1,3 @@
 export const About = () => {
-  return <h1>Sobre</h1>;
+  return <h2>Sobre</h2>;
 };

desafio-react-e-typescript/src/pages/Delivery.tsx

@@ -1,3 +1,3 @@
 export const Delivery = () => {
-  return <h1> Entrega </h1>;
+  return <h2> Entrega </h2>;
 };

desafio-react-e-typescript/src/pages/Payments.tsx

@@ -1,3 +1,3 @@
 export const Payments = () => {
-  return <h1>Pagamentos</h1>;
+  return <h2>Pagamentos</h2>;
 };

desafio-react-e-typescript/src/pages/Privacy.tsx

@@ -1,3 +1,3 @@
 export const Privacy = () => {
-  return <h1> Seguraça e Privacidade </h1>;
+  return <h2> Seguraça e Privacidade </h2>;
 };

desafio-react-e-typescript/src/pages/Refund.tsx

@@ -1,3 +1,3 @@
 export const Refund = () => {
-  return <h1> Troca ou Devolução </h1>;
+  return <h2> Troca ou Devolução </h2>;
 };

desafio-react-e-typescript/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

desafio-react-e-typescript/src/schema/CustonValidations.ts

@@ -1,3 +0,0 @@
-export const phoneNumber = /\([1-9]{2}\) 9[1-9]\d{3}-\d{4}/;
-
-export const cpfNumber = /\d{3}.\d{3}.\d{3}-\d{2}/;

desafio-react-e-typescript/src/schema/CustonValidationsRegex.ts

@@ -0,0 +1,5 @@
+export const phoneNumber = /\([1-9]{2}\) [1-9]{2}\d{3}-\d{4}/;
+
+export const cpfNumber = /\d{3}.\d{3}.\d{3}-\d{2}/;
+
+export const insta = /@/;

desafio-react-e-typescript/src/schema/FormSchema.ts

@@ -1,6 +1,6 @@
 import * as Yup from "yup";
 
-import { phoneNumber, cpfNumber } from "./CustonValidations";
+import { phoneNumber, cpfNumber, insta } from "./CustonValidationsRegex";
 
 export default Yup.object().shape({
   name: Yup.string().required("*Campo Obrigatório"),
@@ -8,8 +8,13 @@ export default Yup.object().shape({
     .email()
     .required("*Campo Obrigatório")
     .email("E-mail inválido"),
-  cpf: Yup.string().matches(cpfNumber).required("*Campo Obrigatório"),
-  telefone: Yup.string().matches(phoneNumber).required("*Campo Obrigatório"),
-  data: Yup.number().required("*Campo Obrigatório"),
-  checkbox: Yup.boolean().required("*"),
+  cpf: Yup.string()
+    .matches(cpfNumber, "CPF inválido")
+    .required("*Campo Obrigatório"),
+  telefone: Yup.string()
+    .matches(phoneNumber, "numero inválido")
+    .required("*Campo Obrigatório"),
+  instagram: Yup.string().matches(insta, "conta inválida"),
+  data: Yup.date().required("*Campo Obrigatório"),
+  checkbox: Yup.boolean().oneOf([true], "*"),
 });