forked from M3-Academy/desafio-react-e-typescript
feature/challenge #1
@ -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>
|
||||
)
|
||||
}
|
@ -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 }
|
@ -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;
|
||||
`;
|
@ -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>
|
||||
)
|
||||
}
|
@ -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 }
|
@ -1,4 +1,4 @@
|
||||
@import '../../variaveis';
|
||||
@import '../../../variaveis';
|
||||
|
||||
.container-info {
|
||||
width: 73%;
|
@ -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>;
|
||||
};
|
@ -1,4 +1,4 @@
|
||||
@import '../../variaveis';
|
||||
@import '../../../variaveis';
|
||||
|
||||
.accordion {
|
||||
@media #{$mq-tablet}, #{$mq-mobile} {
|
40
src/components/organisms/Accordion/index.tsx
Normal file
40
src/components/organisms/Accordion/index.tsx
Normal file
@ -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 };
|
@ -1,4 +1,4 @@
|
||||
@import '../../variaveis';
|
||||
@import '../../../variaveis';
|
||||
|
||||
.form {
|
||||
width: 73%;
|
@ -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";
|
||||
|
@ -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 | "">("");
|
||||
|
@ -1,4 +1,4 @@
|
||||
@import '../../variaveis';
|
||||
@import '../../../variaveis';
|
||||
|
||||
.main {
|
||||
width: calc(100% - 200px);
|
14
src/components/organisms/Main/Main.tsx
Normal file
14
src/components/organisms/Main/Main.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
@ -1,4 +1,4 @@
|
||||
@import '../../../variaveis';
|
||||
@import '../../../../variaveis';
|
||||
|
||||
.navbar {
|
||||
width: 25%;
|
@ -1,4 +1,4 @@
|
||||
@import '../../variaveis';
|
||||
@import '../../../variaveis';
|
||||
|
||||
.submenu {
|
||||
display: flex;
|
32
src/components/organisms/SubmenuMain/router.tsx
Normal file
32
src/components/organisms/SubmenuMain/router.tsx
Normal file
@ -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 };
|
@ -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";
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user