LeonardoPereiraRocha/desafio-react-e-typescript-leonardo-pereira-rocha
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: cria o menu principal

Browse Source
This commit is contained in:
Leonardo Pereira Rocha 2023-01-06 20:52:16 -03:00
parent c1036e2e7a
commit b13a5207f3
8 changed files with 181 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pagina-institucional/public/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
@ -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`.
-->
<title>React App</title>
<title>Pagina Institucional</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

41
pagina-institucional/src/components/AccordionMenu.tsx Normal file
View File

@ -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<AccordionMenuProps> = ({ items }) => {
const [activeIndex, setActiveIndex] = React.useState<number | null>(null);
const onTitleClick = (index: number) => {
setActiveIndex(index === activeIndex ? null : index);
};
return (
<div className={styles.accordionMenu}>
{items.map((item, index) => {
const active = index === activeIndex;
return (
<div key={item.title} className={styles.accordionItem}>
<div
className={`${styles.accordionTitle} ${
active ? styles.active : ""
}`}
onClick={() => onTitleClick(index)}
>
{item.title}
</div>
{active && (
<div className={styles.accordionContent}>{item.content}</div>
)}
</div>
);
})}
</div>
);
};
export default AccordionMenu;

60
pagina-institucional/src/components/Main.tsx Normal file
View File

@ -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: (
<>
<h2>Sobre</h2>
<p>
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?
</p>
<p>
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?
</p>
</>
),
},
{
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 (
<div className="app">
<div>
<a href="/">Link</a>
</div>
<h1 className={styles.mainTitle}>Institucional</h1>
<AccordionMenu items={items} />
</div>
);
};
export { Main };

28
pagina-institucional/src/components/MenuInfo.tsx Normal file
View File

@ -0,0 +1,28 @@
import React from "react";
const MenuInfo = () => {
return (
<div>
<h3>Teste</h3>
<p>
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.
</p>
<p>
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
</p>
</div>
);
};
export { MenuInfo };

2
pagina-institucional/src/pages/Home.tsx
View File

@ -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 (
<>
<Header />
<HeaderBottom />
<Main />
</>
);
};

34
pagina-institucional/src/style/AccordionMenu.module.scss Normal file
View File

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

3
pagina-institucional/src/style/HeaderBottom.module.scss
View File

@ -3,6 +3,9 @@
background: #000;
gap: 55px;
height: 44px;
@media (max-width: 1024px) {
display: none;
}
.textlinks1 {
margin-left: 125px;

11
pagina-institucional/src/style/Main.module.scss Normal file
View File

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