From b13a5207f3d312cec2dbd3ad781830dc8ce6f658 Mon Sep 17 00:00:00 2001 From: Leonardo Date: Fri, 6 Jan 2023 20:52:16 -0300 Subject: [PATCH] feat: cria o menu principal --- pagina-institucional/public/index.html | 4 +- .../src/components/AccordionMenu.tsx | 41 +++++++++++++ pagina-institucional/src/components/Main.tsx | 60 +++++++++++++++++++ .../src/components/MenuInfo.tsx | 28 +++++++++ pagina-institucional/src/pages/Home.tsx | 2 + .../src/style/AccordionMenu.module.scss | 34 +++++++++++ .../src/style/HeaderBottom.module.scss | 3 + .../src/style/Main.module.scss | 11 ++++ 8 files changed, 181 insertions(+), 2 deletions(-) create mode 100644 pagina-institucional/src/components/AccordionMenu.tsx create mode 100644 pagina-institucional/src/components/Main.tsx create mode 100644 pagina-institucional/src/components/MenuInfo.tsx create mode 100644 pagina-institucional/src/style/AccordionMenu.module.scss create mode 100644 pagina-institucional/src/style/Main.module.scss diff --git a/pagina-institucional/public/index.html b/pagina-institucional/public/index.html index aa069f2..5fdc23b 100644 --- a/pagina-institucional/public/index.html +++ b/pagina-institucional/public/index.html @@ -1,5 +1,5 @@ - + @@ -24,7 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App + Pagina Institucional diff --git a/pagina-institucional/src/components/AccordionMenu.tsx b/pagina-institucional/src/components/AccordionMenu.tsx new file mode 100644 index 0000000..8b56d26 --- /dev/null +++ b/pagina-institucional/src/components/AccordionMenu.tsx @@ -0,0 +1,41 @@ +import React from "react"; +import styles from "../style/AccordionMenu.module.scss"; +type AccordionMenuProps = { + items: { + title: string; + content: any; + }[]; +}; + +const AccordionMenu: React.FC = ({ items }) => { + const [activeIndex, setActiveIndex] = React.useState(null); + + const onTitleClick = (index: number) => { + setActiveIndex(index === activeIndex ? null : index); + }; + + return ( +
+ {items.map((item, index) => { + const active = index === activeIndex; + return ( +
+
onTitleClick(index)} + > + {item.title} +
+ {active && ( +
{item.content}
+ )} +
+ ); + })} +
+ ); +}; + +export default AccordionMenu; diff --git a/pagina-institucional/src/components/Main.tsx b/pagina-institucional/src/components/Main.tsx new file mode 100644 index 0000000..24caae9 --- /dev/null +++ b/pagina-institucional/src/components/Main.tsx @@ -0,0 +1,60 @@ +import React from "react"; +import AccordionMenu from "../components/AccordionMenu"; +import styles from "../style/Main.module.scss"; + +const items = [ + { + title: "Sobre", + content: ( + <> +

Sobre

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. In + laboriosam, eveniet dolor, dolorum fugiat doloremque ab doloribus modi + neque vel soluta repudiandae at sequi commodi? Ducimus doloremque + nihil eius recusandae? +

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. In + laboriosam, eveniet dolor, dolorum fugiat doloremque ab doloribus modi + neque vel soluta repudiandae at sequi commodi? Ducimus doloremque + nihil eius recusandae? +

+ + ), + }, + { + title: "Formas de Pagamento", + content: "Content for item 2", + }, + { + title: "Entrega", + content: "Content for item 3", + }, + { + title: "Troca e Devolução", + content: "Content for item 4", + }, + { + title: "Segurança e Privacidade", + content: "Content for item 3", + }, + { + title: "Contato", + content: "Content for item 3", + }, +]; + +const Main = () => { + return ( +
+
+ Link +
+

Institucional

+ +
+ ); +}; + +export { Main }; diff --git a/pagina-institucional/src/components/MenuInfo.tsx b/pagina-institucional/src/components/MenuInfo.tsx new file mode 100644 index 0000000..7e65e66 --- /dev/null +++ b/pagina-institucional/src/components/MenuInfo.tsx @@ -0,0 +1,28 @@ +import React from "react"; + +const MenuInfo = () => { + return ( +
+

Teste

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. +

+

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab + illo inventore veritatis et quasi architecto beatae vitae dicta sunt + explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut + odit aut fugit, sed quia consequuntur magni dolores eos qui ratione + voluptatem +

+
+ ); +}; + +export { MenuInfo }; diff --git a/pagina-institucional/src/pages/Home.tsx b/pagina-institucional/src/pages/Home.tsx index c68713b..920b9d8 100644 --- a/pagina-institucional/src/pages/Home.tsx +++ b/pagina-institucional/src/pages/Home.tsx @@ -3,12 +3,14 @@ import { Route } from "react-router"; import { BrowserRouter } from "react-router-dom"; import { Header } from "../components/Header"; import { HeaderBottom } from "../components/HeaderBottom"; +import { Main } from "../components/Main"; const Home = () => { return ( <>
+
); }; diff --git a/pagina-institucional/src/style/AccordionMenu.module.scss b/pagina-institucional/src/style/AccordionMenu.module.scss new file mode 100644 index 0000000..03486b6 --- /dev/null +++ b/pagina-institucional/src/style/AccordionMenu.module.scss @@ -0,0 +1,34 @@ +.accordionMenu { + display: flex; + flex-direction: column; + justify-content: space-around; + cursor: pointer; +} + +.accordionItem { + flex: 1; + display: flex; + flex-direction: row; +} + +.accordionTitle { + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 19px; + margin-bottom: 10px; + width: 302px; + height: 39px; + display: flex; + align-items: center; + margin-left: 125px; +} + +.accordionTitle.active { + background-color: black; + color: white; +} + +.accordionContent { + margin-left: 50px; +} diff --git a/pagina-institucional/src/style/HeaderBottom.module.scss b/pagina-institucional/src/style/HeaderBottom.module.scss index 9a2f870..eccbb6e 100644 --- a/pagina-institucional/src/style/HeaderBottom.module.scss +++ b/pagina-institucional/src/style/HeaderBottom.module.scss @@ -3,6 +3,9 @@ background: #000; gap: 55px; height: 44px; + @media (max-width: 1024px) { + display: none; + } .textlinks1 { margin-left: 125px; diff --git a/pagina-institucional/src/style/Main.module.scss b/pagina-institucional/src/style/Main.module.scss new file mode 100644 index 0000000..7dbe2df --- /dev/null +++ b/pagina-institucional/src/style/Main.module.scss @@ -0,0 +1,11 @@ +.mainTitle { + margin-top: 81px; + text-align: center; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 28px; + letter-spacing: 0.1em; + text-transform: uppercase; + margin-bottom: 80px; +}