refactor: adicionando organisms a pasta organisms

src/components/Accordion/context/ContentAccordion.tsx

@@ -1,15 +0,0 @@
-import { createContext } from "react";
-
-import { IAccordionContextProps, IAccordionProviderProps } from "../@types";
-
-export const AccordionContext = createContext<IAccordionContextProps>({
-    current : '',
-}as IAccordionContextProps)
-
-export const AccordionProvider = ({children, value}: IAccordionProviderProps ) => {
-    return (
-        <AccordionContext.Provider  value={value}>
-            {children}
-        </ AccordionContext.Provider>
-    )
-}

src/components/Accordion/index.tsx

@@ -1,49 +0,0 @@
-import { useContext } from "react";
-
-import { AccordionContext } from "./context/ContentAccordion";
-
-import styles from './index.module.scss';
-
-import { IContentProps, IRootProps, IHeaderProps } from "./@types";
-
-const Root = ({customKey, children}: IRootProps) => {
-    const {current} = useContext(AccordionContext);
-
-    const Opened = () => {
-        if (current === customKey) {
-            return styles.opened
-        } else {
-            return '';
-        }
-    }
-
-    return (
-
-        <div className={`${styles["accordion"]} ${Opened()}`}>
-            {children}
-        </div>
-    )
-}
-
-const Header = ({customKey, children}: IHeaderProps) => {
-    const {handleSetCurrent} = useContext(AccordionContext);
-
-    return (
-        <header className={styles['accordionHeader']} onClick={()=> handleSetCurrent(customKey)}>
-            {children}
-            <i className={styles['accordionHeader__icon']}></i>
-        </header>
-    )
-}
-
-const Content = ({children}:IContentProps) => {
-    return (
-        <div className={styles['accordionContent']}>
-            {children}
-        </div>
-    )
-}
-
-const Accordion = Object.assign(Root, {Header, Content});
-
-export { Accordion }

src/components/Container/Container.tsx

@@ -1,15 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.main`
-position: absolute;
-backdrop-filter: blur(1px);
-width: 100%;
-height: 100%;
-top: 0;
-left: 0;
-right: 0;
-bottom: 0;
-z-index: 5;
-
-background: $color-black-transparent;
-`;

src/components/Main/Main.tsx

@@ -1,16 +0,0 @@
-import { Submenu } from "../Submenu/Submenu"
-
-import styles from './Main.module.scss';
-
-export const Main = () => {
-    return (
-        <main className={styles['main']}>
-            <h1 className={styles['main__title']}>
-                Institucional
-            </h1>
-            <div className={styles['main__group']}>
-                <Submenu />
-            </div>
-        </main>
-    )
-}

src/components/Submenu/Submenu.tsx

@@ -1,32 +0,0 @@
-import { BrowserRouter as Router, Route, Routes  } from 'react-router-dom'
-
-import { NavbarSubmenu } from './NavBar/NavbarSubmenu';
-
-import { Sobre } from '../Subpages/Sobre';
-import { FormaPagamento } from '../Subpages/FormaPagamento';
-import { Entrega } from '../Subpages/Entrega';
-import { TrocaDevolucao } from '../Subpages/TrocaDevolucao'
-import { SegurancaPrivacidade } from '../Subpages/SegurancaPrivacidade'
-
-import styles from './Submenu.module.scss'
-import { FaleConosco } from '../FaleConosco/FaleConosco';
-
-const Submenu = () => {
-    return (
-        <section className={styles['submenu']}>
-            <Router>
-                < NavbarSubmenu />
-                <Routes>
-                    <Route path='/' element={<Sobre />} />
-                    <Route path='/formapagamento' element={<FormaPagamento />} />
-                    <Route path='/entrega' element={<Entrega/>} />
-                    <Route path='/trocadevolucao' element={<TrocaDevolucao />} />
-                    <Route path='/segurancaprivacidade' element={<SegurancaPrivacidade/>} />
-                    <Route path='/contato' element={<FaleConosco />} />
-                </Routes>
-            </Router>
-        </section>
-    )
-}
-
-export { Submenu }

src/components/molecules/Subpages/geral.module.scss

@@ -1,4 +1,4 @@
-@import '../../variaveis';
+@import '../../../variaveis';
 
 .container-info {
     width: 73%;

src/components/organisms/Accordion/context/ContentAccordion.tsx

@@ -0,0 +1,11 @@
+import { createContext } from "react";
+
+import { IAccordionContextProps, IAccordionProviderProps } from "../@types";
+
+export const AccordionContext = createContext<IAccordionContextProps>({
+    current: "",
+} as IAccordionContextProps);
+
+export const AccordionProvider = ({ children, value }: IAccordionProviderProps) => {
+    return <AccordionContext.Provider value={value}>{children}</AccordionContext.Provider>;
+};

src/components/organisms/Accordion/index.module.scss

@@ -1,4 +1,4 @@
-@import '../../variaveis';
+@import '../../../variaveis';
 
 .accordion {
     @media #{$mq-tablet}, #{$mq-mobile} {

src/components/organisms/Accordion/index.tsx

@@ -0,0 +1,40 @@
+import { useContext } from "react";
+
+import { AccordionContext } from "./context/ContentAccordion";
+
+import styles from "./index.module.scss";
+
+import { IContentProps, IRootProps, IHeaderProps } from "./@types";
+
+const Root = ({ customKey, children }: IRootProps) => {
+    const { current } = useContext(AccordionContext);
+
+    const Opened = () => {
+        if (current === customKey) {
+            return styles.opened;
+        } else {
+            return "";
+        }
+    };
+
+    return <div className={`${styles["accordion"]} ${Opened()}`}>{children}</div>;
+};
+
+const Header = ({ customKey, children }: IHeaderProps) => {
+    const { handleSetCurrent } = useContext(AccordionContext);
+
+    return (
+        <header className={styles["accordionHeader"]} onClick={() => handleSetCurrent(customKey)}>
+            {children}
+            <i className={styles["accordionHeader__icon"]}></i>
+        </header>
+    );
+};
+
+const Content = ({ children }: IContentProps) => {
+    return <div className={styles["accordionContent"]}>{children}</div>;
+};
+
+const Accordion = Object.assign(Root, { Header, Content });
+
+export { Accordion };

src/components/organisms/FaleConosco/FaleConosco.module.scss

@@ -1,4 +1,4 @@
-@import '../../variaveis';
+@import '../../../variaveis';
 
 .form {
     width: 73%;

src/components/organisms/FaleConosco/FaleConosco.tsx

@@ -2,7 +2,7 @@ import { Link } from "react-router-dom";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import MaskedInput from "react-text-mask";
 
-import FormSchema from "../../schema/FormSchema";
+import FormSchema from "../../../schema/FormSchema";
 import styles from "./FaleConosco.module.scss";
 import { useState } from "react";
 

src/components/organisms/Footer/FooterTop/FooterTop.tsx

@@ -8,8 +8,8 @@ import twitter from "../../../../assets/imgs/logo-twitter.png";
 import youtube from "../../../../assets/imgs/logo-youtube.png";
 import linkedin from "../../../../assets/imgs/logo-linkedin.png";
 
-import { Accordion } from "../../../Accordion";
-import { AccordionProvider } from "../../../Accordion/context/ContentAccordion";
+import { Accordion } from "../../Accordion";
+import { AccordionProvider } from "../../Accordion/context/ContentAccordion";
 
 const FooterTop = () => {
     const [ulIsVisible, setUlIsVisible] = useState<string | number | "">("");

src/components/organisms/Main/Main.module.scss

@@ -1,4 +1,4 @@
-@import '../../variaveis';
+@import '../../../variaveis';
 
 .main {
     width: calc(100% - 200px);

src/components/organisms/Main/Main.tsx

@@ -0,0 +1,14 @@
+import { Submenu } from "../SubmenuMain/router";
+
+import styles from "./Main.module.scss";
+
+export const Main = () => {
+    return (
+        <main className={styles["main"]}>
+            <h1 className={styles["main__title"]}>Institucional</h1>
+            <div className={styles["main__group"]}>
+                <Submenu />
+            </div>
+        </main>
+    );
+};

src/components/organisms/SubmenuMain/NavBar/NavbarSubmenu.module.scss

@@ -1,4 +1,4 @@
-@import '../../../variaveis';
+@import '../../../../variaveis';
 
 .navbar {
     width: 25%;

src/components/organisms/SubmenuMain/Submenu.module.scss

@@ -1,4 +1,4 @@
-@import '../../variaveis';
+@import '../../../variaveis';
 
 .submenu {
     display: flex;

src/components/organisms/SubmenuMain/router.tsx

@@ -0,0 +1,32 @@
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+
+import { NavbarSubmenu } from "./NavBar/NavbarSubmenu";
+
+import { Sobre } from "../../molecules/Subpages/Sobre";
+import { FormaPagamento } from "../../molecules/Subpages/FormaPagamento";
+import { Entrega } from "../../molecules/Subpages/Entrega";
+import { TrocaDevolucao } from "../../molecules/Subpages/TrocaDevolucao";
+import { SegurancaPrivacidade } from "../../molecules/Subpages/SegurancaPrivacidade";
+
+import styles from "./Submenu.module.scss";
+import { FaleConosco } from "../FaleConosco/FaleConosco";
+
+const Submenu = () => {
+    return (
+        <section className={styles["submenu"]}>
+            <Router>
+                <NavbarSubmenu />
+                <Routes>
+                    <Route path="/" element={<Sobre />} />
+                    <Route path="/formapagamento" element={<FormaPagamento />} />
+                    <Route path="/entrega" element={<Entrega />} />
+                    <Route path="/trocadevolucao" element={<TrocaDevolucao />} />
+                    <Route path="/segurancaprivacidade" element={<SegurancaPrivacidade />} />
+                    <Route path="/contato" element={<FaleConosco />} />
+                </Routes>
+            </Router>
+        </section>
+    );
+};
+
+export { Submenu };

src/pages/Home.tsx

@@ -2,7 +2,7 @@ import styles from "./Home.module.scss";
 
 import { Header } from "../components/organisms/Header/Header";
 import { BreadCrumbs } from "../components/molecules/Breadcrumbs/Breadcrumbs";
-import { Main } from "../components/Main/Main";
+import { Main } from "../components/organisms/Main/Main";
 import { ButtonsFixeds } from "../components/Atoms/ButtonsFixed/ButtonsFixed";
 import { Footer } from "../components/organisms/Footer/Footer";