feature/challenge #1

Merged
BernardoWaldhelm merged 38 commits from feature/challenge into main 2023-01-15 15:25:18 +00:00
25 changed files with 107 additions and 137 deletions
Showing only changes of commit b253a3466d - Show all commits

View File

@ -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>
)
}

View File

@ -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 }

View File

@ -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;
`;

View File

@ -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>
)
}

View File

@ -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 }

View File

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

View File

@ -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>;
};

View File

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

View 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 };

View File

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

View File

@ -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";

View File

@ -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 | "">("");

View File

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

View 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>
);
};

View File

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

View File

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

View 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 };

View File

@ -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";