diff --git a/package-lock.json b/package-lock.json index 0316886..cdb0172 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "react-dom": "^18.2.0", "react-imask": "^6.4.3", "react-input-mask": "^2.0.4", + "react-router-dom": "^6.6.1", "react-scripts": "5.0.1", "sass": "^1.57.1", "typescript": "^4.9.4", @@ -3079,6 +3080,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==", + "engines": { + "node": ">=14" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -14069,6 +14078,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.6.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.1.tgz", + "integrity": "sha512-YkvlYRusnI/IN0kDtosUCgxqHeulN5je+ew8W+iA1VvFhf86kA+JEI/X/8NqYcr11hCDDp906S+SGMpBheNeYQ==", + "dependencies": { + "@remix-run/router": "1.2.1" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.6.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.1.tgz", + "integrity": "sha512-u+8BKUtelStKbZD5UcY0NY90WOzktrkJJhyhNg7L0APn9t1qJNLowzrM9CHdpB6+rcPt6qQrlkIXsTvhuXP68g==", + "dependencies": { + "@remix-run/router": "1.2.1", + "react-router": "6.6.1" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -19012,6 +19051,11 @@ "source-map": "^0.7.3" } }, + "@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==" + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -26854,6 +26898,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.6.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.1.tgz", + "integrity": "sha512-YkvlYRusnI/IN0kDtosUCgxqHeulN5je+ew8W+iA1VvFhf86kA+JEI/X/8NqYcr11hCDDp906S+SGMpBheNeYQ==", + "requires": { + "@remix-run/router": "1.2.1" + } + }, + "react-router-dom": { + "version": "6.6.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.1.tgz", + "integrity": "sha512-u+8BKUtelStKbZD5UcY0NY90WOzktrkJJhyhNg7L0APn9t1qJNLowzrM9CHdpB6+rcPt6qQrlkIXsTvhuXP68g==", + "requires": { + "@remix-run/router": "1.2.1", + "react-router": "6.6.1" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/package.json b/package.json index c3610be..1ae9df2 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "react-dom": "^18.2.0", "react-imask": "^6.4.3", "react-input-mask": "^2.0.4", + "react-router-dom": "^6.6.1", "react-scripts": "5.0.1", "sass": "^1.57.1", "typescript": "^4.9.4", diff --git a/src/components/Header.tsx b/src/components/Header/Header.tsx similarity index 91% rename from src/components/Header.tsx rename to src/components/Header/Header.tsx index 2d58c06..03d9c36 100644 --- a/src/components/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,11 +1,11 @@ import { useState } from "react"; import SearchBar from "./SearchBar"; -import Logo from "../assets/img/logoM3.png"; -import Cart from "../assets/img/Cart.png"; -import iconMenu from "../assets/img/iconMenu.png"; +import Logo from "./assets/img/logoM3.png"; +import Cart from "./assets/img/Cart.png"; +import iconMenu from "./assets/img/iconMenu.png"; import Link from "./Link"; import HeaderLinks from "./HeaderLinks"; -import MenuMobile from "./MenuMobile"; +import MenuMobile from "./Menu-Mobile/MenuMobile"; import styles from "./header.module.scss"; diff --git a/src/components/HeaderLinks.tsx b/src/components/Header/HeaderLinks.tsx similarity index 100% rename from src/components/HeaderLinks.tsx rename to src/components/Header/HeaderLinks.tsx diff --git a/src/components/Link.tsx b/src/components/Header/Link.tsx similarity index 100% rename from src/components/Link.tsx rename to src/components/Header/Link.tsx diff --git a/src/components/menuMobile.tsx b/src/components/Header/Menu-Mobile/MenuMobile.tsx similarity index 89% rename from src/components/menuMobile.tsx rename to src/components/Header/Menu-Mobile/MenuMobile.tsx index 60f26df..f7c40f6 100644 --- a/src/components/menuMobile.tsx +++ b/src/components/Header/Menu-Mobile/MenuMobile.tsx @@ -1,8 +1,8 @@ import iconExit from "../assets/img/iconExit.png"; -import Link from "./Link"; -import HeaderLinks from "./HeaderLinks"; +import Link from "../Link"; +import HeaderLinks from "../HeaderLinks"; -import styles from "./header.module.scss"; +import styles from "../header.module.scss"; interface MenuMobileProps { className: string; diff --git a/src/components/SearchBar.tsx b/src/components/Header/SearchBar.tsx similarity index 88% rename from src/components/SearchBar.tsx rename to src/components/Header/SearchBar.tsx index 677b026..05e4461 100644 --- a/src/components/SearchBar.tsx +++ b/src/components/Header/SearchBar.tsx @@ -1,4 +1,4 @@ -import iconBusca from "../assets/img/IconBusca.png"; +import iconBusca from "./assets/img/IconBusca.png"; import styles from "./header.module.scss"; diff --git a/src/assets/img/Cart.png b/src/components/Header/assets/img/Cart.png similarity index 100% rename from src/assets/img/Cart.png rename to src/components/Header/assets/img/Cart.png diff --git a/src/assets/img/IconBusca.png b/src/components/Header/assets/img/IconBusca.png similarity index 100% rename from src/assets/img/IconBusca.png rename to src/components/Header/assets/img/IconBusca.png diff --git a/src/assets/img/iconExit.png b/src/components/Header/assets/img/iconExit.png similarity index 100% rename from src/assets/img/iconExit.png rename to src/components/Header/assets/img/iconExit.png diff --git a/src/assets/img/iconMenu.png b/src/components/Header/assets/img/iconMenu.png similarity index 100% rename from src/assets/img/iconMenu.png rename to src/components/Header/assets/img/iconMenu.png diff --git a/src/assets/img/logoM3.png b/src/components/Header/assets/img/logoM3.png similarity index 100% rename from src/assets/img/logoM3.png rename to src/components/Header/assets/img/logoM3.png diff --git a/src/components/header.module.scss b/src/components/Header/header.module.scss similarity index 99% rename from src/components/header.module.scss rename to src/components/Header/header.module.scss index c0e3321..617fbc4 100644 --- a/src/components/header.module.scss +++ b/src/components/Header/header.module.scss @@ -1,4 +1,4 @@ -@import 'variables.scss'; +@import '../variables.scss'; .page-header { display: flex; diff --git a/src/components/Main.tsx b/src/components/Main/Main.tsx similarity index 80% rename from src/components/Main.tsx rename to src/components/Main/Main.tsx index 4acc6a3..5c7c58d 100644 --- a/src/components/Main.tsx +++ b/src/components/Main/Main.tsx @@ -1,6 +1,6 @@ -import iconHome from "../assets/img/iconHome.png"; -import arrow from "../assets/img/arrow.png"; -import SubjectMain from "./SubjectMain"; +import iconHome from "./assets/iconHome.png"; +import arrow from "./assets/arrow.png"; +import SubjectMain from "./Subject/SubjectMain"; import styles from "./main.module.scss"; diff --git a/src/components/RegistrationForm.tsx b/src/components/Main/Subject/Contato/RegistrationForm.tsx similarity index 93% rename from src/components/RegistrationForm.tsx rename to src/components/Main/Subject/Contato/RegistrationForm.tsx index 5e1d73b..f024d39 100644 --- a/src/components/RegistrationForm.tsx +++ b/src/components/Main/Subject/Contato/RegistrationForm.tsx @@ -2,14 +2,10 @@ import { useCallback, useState } from "react"; import styles from "./form.module.scss"; import stylesInput from "./input.module.scss"; import stylesCheckbox from "./checkbox.module.scss"; -import FormSchema from "../schema/FormSchema"; +import FormSchema from "../../../../schema/FormSchema"; import { Formik, Form, Field, ErrorMessage } from "formik"; -interface RegistrationFormProps { - active: boolean; -} - interface FormikValues { name: string; email: string; @@ -30,7 +26,7 @@ const initialValues = { acceptTerms: false, }; -const RegistrationForm = (props: RegistrationFormProps) => { +const RegistrationForm = () => { const [isSubmit, setIsSubmit] = useState(false); const handleFormSubmit = (values: FormikValues) => { values.name = ""; @@ -61,10 +57,16 @@ const RegistrationForm = (props: RegistrationFormProps) => { value = value.replace(/^(\d{3})(\d{3})(\d{3})(\d)/, "$1.$2.$3-$4"); e.currentTarget.value = value; }, []); + const handleInstagram = useCallback( + (e: React.FormEvent) => { + let value = e.currentTarget.value; + value = value.replace(/^(\d)/, "@$1"); + e.currentTarget.value = value; + }, + [] + ); return ( -
+
{ id="Instagram" placeholder="@seuuser" name="instagram" + onKeyUp={handleInstagram} />
diff --git a/src/components/checkbox.module.scss b/src/components/Main/Subject/Contato/checkbox.module.scss similarity index 95% rename from src/components/checkbox.module.scss rename to src/components/Main/Subject/Contato/checkbox.module.scss index 87a0f0e..ab87db0 100644 --- a/src/components/checkbox.module.scss +++ b/src/components/Main/Subject/Contato/checkbox.module.scss @@ -1,4 +1,4 @@ -@import 'variables.scss'; +@import '../../../variables.scss'; .page-main { &__container { diff --git a/src/components/form.module.scss b/src/components/Main/Subject/Contato/form.module.scss similarity index 96% rename from src/components/form.module.scss rename to src/components/Main/Subject/Contato/form.module.scss index b589eee..7b61b11 100644 --- a/src/components/form.module.scss +++ b/src/components/Main/Subject/Contato/form.module.scss @@ -1,4 +1,4 @@ -@import 'variables.scss'; +@import '../../../variables.scss'; .desative { display: none; diff --git a/src/components/input.module.scss b/src/components/Main/Subject/Contato/input.module.scss similarity index 97% rename from src/components/input.module.scss rename to src/components/Main/Subject/Contato/input.module.scss index 1f237b4..22a46b4 100644 --- a/src/components/input.module.scss +++ b/src/components/Main/Subject/Contato/input.module.scss @@ -1,4 +1,4 @@ -@import 'variables.scss'; +@import '../../../variables.scss'; .page-main { &__container { diff --git a/src/components/Main/Subject/Entrega/Entrega.tsx b/src/components/Main/Subject/Entrega/Entrega.tsx new file mode 100644 index 0000000..6a3bd6f --- /dev/null +++ b/src/components/Main/Subject/Entrega/Entrega.tsx @@ -0,0 +1,8 @@ +import React from "react"; +import SubjectText from "../SubjectText"; + +const Entrega = () => { + return ; +}; + +export default Entrega; diff --git a/src/components/Main/Subject/Forma-de-pagamento/FormaDePagamento.tsx b/src/components/Main/Subject/Forma-de-pagamento/FormaDePagamento.tsx new file mode 100644 index 0000000..0afb3c8 --- /dev/null +++ b/src/components/Main/Subject/Forma-de-pagamento/FormaDePagamento.tsx @@ -0,0 +1,8 @@ +import React from "react"; +import SubjectText from "../SubjectText"; + +const FormaDePagamento = () => { + return ; +}; + +export default FormaDePagamento; diff --git a/src/components/Main/Subject/Nav/Li/Li.tsx b/src/components/Main/Subject/Nav/Li/Li.tsx new file mode 100644 index 0000000..ccf7802 --- /dev/null +++ b/src/components/Main/Subject/Nav/Li/Li.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import styles from "../../subject.module.scss"; +import { NavLink, NavLinkProps } from "react-router-dom"; + +interface LiProps extends NavLinkProps { + text: string; + to: NavLinkProps["to"]; +} + +const LiForm = (props: LiProps) => { + return ( +
  • + + isActive + ? styles["page-subject__active"] + : styles["page-subject__button"] + } + > + {props.text} + +
    • + ); +}; + +export default LiForm; diff --git a/src/components/Main/Subject/Nav/Nav.tsx b/src/components/Main/Subject/Nav/Nav.tsx new file mode 100644 index 0000000..f7294c7 --- /dev/null +++ b/src/components/Main/Subject/Nav/Nav.tsx @@ -0,0 +1,27 @@ +import React, { useState } from "react"; +import Li from "./Li/Li"; +import styles from "../subject.module.scss"; + +const Nav = () => { + const [isOpen, setOpen] = useState(false); + const Sobre = () => { + setOpen(!isOpen); + }; + + return ( + <> + + + ); +}; + +export default Nav; diff --git a/src/components/Main/Subject/Segurança-e-privacidade/SegurancaEPrivacidade.tsx b/src/components/Main/Subject/Segurança-e-privacidade/SegurancaEPrivacidade.tsx new file mode 100644 index 0000000..0dbad5a --- /dev/null +++ b/src/components/Main/Subject/Segurança-e-privacidade/SegurancaEPrivacidade.tsx @@ -0,0 +1,8 @@ +import React from "react"; +import SubjectText from "../SubjectText"; + +const SegurancaEPrivacidade = () => { + return ; +}; + +export default SegurancaEPrivacidade; diff --git a/src/components/Main/Subject/Sobre/Sobre.tsx b/src/components/Main/Subject/Sobre/Sobre.tsx new file mode 100644 index 0000000..84221ca --- /dev/null +++ b/src/components/Main/Subject/Sobre/Sobre.tsx @@ -0,0 +1,8 @@ +import React from "react"; +import SubjectText from "../SubjectText"; + +const Sobre = () => { + return ; +}; + +export default Sobre; diff --git a/src/components/Main/Subject/SubjectMain.tsx b/src/components/Main/Subject/SubjectMain.tsx new file mode 100644 index 0000000..3a993e5 --- /dev/null +++ b/src/components/Main/Subject/SubjectMain.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import styles from "./subject.module.scss"; +import Nav from "./Nav/Nav"; +import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; +import Sobre from "./Sobre/Sobre"; +import FormaDePagamento from "./Forma-de-pagamento/FormaDePagamento"; +import Entrega from "./Entrega/Entrega"; +import TrocaEDevolucao from "./Troca-e-devolucao/TrocaEDevolucao"; +import SegurancaEPrivacidade from "./Segurança-e-privacidade/SegurancaEPrivacidade"; +import RegistrationForm from "./Contato/RegistrationForm"; + +const SubjectMain = () => { + return ( +
    + +
    + ); +}; + +export default SubjectMain; diff --git a/src/components/SubjectText.tsx b/src/components/Main/Subject/SubjectText.tsx similarity index 93% rename from src/components/SubjectText.tsx rename to src/components/Main/Subject/SubjectText.tsx index 9b41fad..c545728 100644 --- a/src/components/SubjectText.tsx +++ b/src/components/Main/Subject/SubjectText.tsx @@ -2,15 +2,10 @@ import styles from "./subject.module.scss"; interface SubjectTextProps { title: string; - active: boolean; } const SubjectText = (props: SubjectTextProps) => { return ( -
    +

    {props.title}

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod diff --git a/src/components/Main/Subject/Troca-e-devolucao/TrocaEDevolucao.tsx b/src/components/Main/Subject/Troca-e-devolucao/TrocaEDevolucao.tsx new file mode 100644 index 0000000..6411aa5 --- /dev/null +++ b/src/components/Main/Subject/Troca-e-devolucao/TrocaEDevolucao.tsx @@ -0,0 +1,8 @@ +import React from "react"; +import SubjectText from "../SubjectText"; + +const TrocaEDevolucao = () => { + return ; +}; + +export default TrocaEDevolucao; diff --git a/src/components/subject.module.scss b/src/components/Main/Subject/subject.module.scss similarity index 98% rename from src/components/subject.module.scss rename to src/components/Main/Subject/subject.module.scss index 305d1d4..c98c1c1 100644 --- a/src/components/subject.module.scss +++ b/src/components/Main/Subject/subject.module.scss @@ -1,4 +1,4 @@ -@import "variables.scss"; +@import "../../variables.scss"; .page-subject { display: flex; diff --git a/src/assets/img/arrow.png b/src/components/Main/assets/arrow.png similarity index 100% rename from src/assets/img/arrow.png rename to src/components/Main/assets/arrow.png diff --git a/src/assets/img/iconHome.png b/src/components/Main/assets/iconHome.png similarity index 100% rename from src/assets/img/iconHome.png rename to src/components/Main/assets/iconHome.png diff --git a/src/components/main.module.scss b/src/components/Main/main.module.scss similarity index 97% rename from src/components/main.module.scss rename to src/components/Main/main.module.scss index 4267490..680b909 100644 --- a/src/components/main.module.scss +++ b/src/components/Main/main.module.scss @@ -1,4 +1,4 @@ -@import "variables.scss"; +@import "../variables.scss"; .page-main { padding: 0 100px; diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx deleted file mode 100644 index 280520f..0000000 --- a/src/components/Nav.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import styles from "./subject.module.scss"; - -interface NavProps { - text: string; - onClick: React.MouseEventHandler; - active: boolean; -} - -const Nav = (props: NavProps) => { - return ( -

  • - {props.text} -
    • - ); -}; - -export default Nav; diff --git a/src/components/SubjectMain.tsx b/src/components/SubjectMain.tsx deleted file mode 100644 index 0b06d1f..0000000 --- a/src/components/SubjectMain.tsx +++ /dev/null @@ -1,157 +0,0 @@ -import Nav from "./Nav"; -import SubjectText from "./SubjectText"; - -import styles from "./subject.module.scss"; -import Forum from "./RegistrationForm"; -import { useState } from "react"; - -const SubjectMain = () => { - const [isSobre, setIsSobre] = useState(true); - const [isPagamento, setIsPagamento] = useState(false); - const [isEntrega, setIsEntrega] = useState(false); - const [isTroca, setIsTroca] = useState(false); - const [isPrivacidade, setIsPrivacidade] = useState(false); - const [isForm, setIsForm] = useState(false); - const activeSobre = () => { - if ( - isSobre || - isPagamento || - isEntrega || - isTroca || - isPrivacidade || - isForm === true - ) { - setIsSobre(true); - setIsPagamento(false); - setIsEntrega(false); - setIsTroca(false); - setIsPrivacidade(false); - setIsForm(false); - } - }; - const activePagamento = () => { - if ( - isSobre === true || - isPagamento || - isEntrega || - isTroca || - isPrivacidade || - isForm === false - ) { - setIsSobre(false); - setIsPagamento(true); - setIsEntrega(false); - setIsTroca(false); - setIsPrivacidade(false); - setIsForm(false); - } - }; - const activeEntrega = () => { - if ( - isSobre || - isPagamento || - isEntrega || - isTroca || - isPrivacidade || - isForm === true - ) { - setIsSobre(false); - setIsPagamento(false); - setIsEntrega(true); - setIsTroca(false); - setIsPrivacidade(false); - setIsForm(false); - } - }; - const activeTroca = () => { - if ( - isSobre || - isPagamento || - isEntrega || - isTroca || - isPrivacidade || - isForm === true - ) { - setIsSobre(false); - setIsPagamento(false); - setIsEntrega(false); - setIsTroca(true); - setIsPrivacidade(false); - setIsForm(false); - } - }; - const activePrivacidade = () => { - if ( - isSobre || - isPagamento || - isEntrega || - isTroca || - isPrivacidade || - isForm === true - ) { - setIsSobre(false); - setIsPagamento(false); - setIsEntrega(false); - setIsTroca(false); - setIsPrivacidade(true); - setIsForm(false); - } - }; - const activeForm = () => { - if ( - isSobre || - isPagamento || - isEntrega || - isTroca || - isPrivacidade || - isForm === true - ) { - setIsSobre(false); - setIsPagamento(false); - setIsEntrega(false); - setIsTroca(false); - setIsPrivacidade(false); - setIsForm(true); - } - }; - const Subjects = [ - , - , - , - , - , - , - ]; - - return ( -
    - -
      -
    • {Subjects}
      • -
    -
    - ); -}; - -export default SubjectMain; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index d0d4fac..e43a3b4 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,5 +1,5 @@ -import Header from "../components/Header"; -import Main from "../components/Main"; +import Header from "../components/Header/Header"; +import Main from "../components/Main/Main"; const Home = () => { return (