YahToth/desafio-react-e-typescript-gabriel-gomes
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature/body #3

Merged
YahToth merged 4 commits from feature/body into main 2023-01-21 02:52:21 +00:00
Conversation 0 Commits 4 Files Changed 21 +90 -102
8 changed files with 90 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 87d13d5e91 - Show all commits

6
desafio-react-e-typescript/src/App.js
View File

@ -1,6 +0,0 @@
import React from "react";
import Routes from "./Routes";
export default function App() {
return <Routes />;
}

18
desafio-react-e-typescript/src/Routes.js
View File

@ -1,18 +0,0 @@
import React from "react";
import { Route, BrowserRouter } from "react-router-dom";
import Home from "./pages/Home";
import Sobre from "./components/Body/Tabs/Sobre";
import Usuario from "./Usuario";
const Routes = () => {
return (
<BrowserRouter>
<Route component={Home} path="/" exact />
<Route component={Sobre} path="/sobre" />
<Route component={Usuario} path="/usuario" />
</BrowserRouter>
);
};
export default Routes;

56
desafio-react-e-typescript/src/components/Body/Body.module.scss
View File

@ -58,35 +58,39 @@
height: 224px;
}
li {
width: 100%;
max-width: 302px;
height: 39px;
padding: 10px 16px;
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #7d7d7d;
cursor: pointer;
a {
text-decoration: none;
@media screen and (min-width: 2500px) {
max-width: 590px;
height: 58px;
font-size: 32px;
line-height: 38px;
margin-bottom: 10px;
}
@media screen and (max-width: 1024px) {
li {
width: 100%;
}
}
max-width: 302px;
height: 39px;
padding: 10px 16px;
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #7d7d7d;
cursor: pointer;
li.active {
color: white;
background-color: black;
max-width: unset;
@media screen and (min-width: 2500px) {
max-width: 590px;
height: 58px;
font-size: 32px;
line-height: 38px;
margin-bottom: 10px;
}
@media screen and (max-width: 1024px) {
width: 100%;
}
}
li.active {
color: white;
background-color: black;
max-width: unset;
}
}
.menu-list-sobre {

40
desafio-react-e-typescript/src/components/Body/Body.tsx
View File

@ -1,11 +1,38 @@
import React from "react";
import { Route, Routes } from "react-router-dom";
import styles from "./Body.module.scss";
import { BreadCrumb } from "./BreadCrumb/BreadCrumb";
import { TabDisposition } from "./Tabs/TabDisposition";
import { TabsContents } from "./Tabs/TabDispositionItems";
import { Sobre } from "../Body/Tabs/Sobre";
const Body = () => {
const TabsContents = [
{
title: "Sobre",
path: "sobre",
},
{
title: "Forma de Pagamento",
path: "pagamento",
},
{
title: "Entrega",
path: "entrega",
},
{
title: "Troca e Devolução",
path: "troca",
},
{
title: "Segurança e Privacidade",
path: "seguranca",
},
{
title: "Contato",
path: "contato",
},
];
return (
<div className={styles["body-container"]}>
<BreadCrumb />
@ -13,7 +40,16 @@ const Body = () => {
<div className={styles["menu-list-container"]}>
<TabDisposition tabs={TabsContents} />
<div className={styles["wrapper-text"]}>
<Routes>
<Route path="sobre" element={<Sobre />} />
<Route path="pagamento" element={<Sobre />} />
<Route path="entrega" element={<Sobre />} />
<Route path="troca" element={<Sobre />} />
<Route path="seguranca" element={<Sobre />} />
<Route path="contato" element={<Sobre />} />
</Routes>
</div>
<section className={styles["description-container"]}>
<div className={styles["description"]}></div>
</section>

28
desafio-react-e-typescript/src/components/Body/Tabs/TabDisposition.tsx
View File

@ -1,10 +1,11 @@
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import styles from "../Body.module.scss";
interface MenuValue {
title: string;
component: JSX.Element;
path: string;
}
export interface TabDispositionProps {
@ -24,21 +25,22 @@ const TabDisposition: React.FC<TabDispositionProps> = ({ tabs }) => {
<ul className={styles["menu-list"]}>
{tabs.map((tab, index) => {
return (
<li
key={tab.title}
onClick={() => {
handleClick(tab);
}}
className={
tabs.indexOf(selectecTab!) === index ? styles["active"] : ""
}
>
{tab.title}
</li>
<Link to={tab.path}>
<li
key={tab.title}
onClick={() => {
handleClick(tab);
}}
className={
tabs.indexOf(selectecTab!) === index ? styles["active"] : ""
}
>
{tab.title}
</li>
</Link>
);
})}
</ul>
<div className={styles["wrapper-text"]}>{selectecTab?.component}</div>
</>
);
};

35
desafio-react-e-typescript/src/components/Body/Tabs/TabDispositionItems.js
View File

@ -1,35 +0,0 @@
import { Sobre } from "./Sobre";
import { Pagamento } from "./FormaDePagamento";
import { Entrega } from "./Entrega";
import { Troca } from "./TrocaEDevolucao";
import { Seguranca } from "./SegurancaEPrivacidade";
import { Contato } from "./Contato";
const TabsContents = [
{
title: "Sobre",
component: <Sobre />,
},
{
title: "Forma de Pagamento",
component: <Pagamento />,
},
{
title: "Entrega",
component: <Entrega />,
},
{
title: "Troca e Devolução",
component: <Troca />,
},
{
title: "Segurança e Privacidade",
component: <Seguranca />,
},
{
title: "Contato",
component: <Contato />,
},
];
export { TabsContents };

2
desafio-react-e-typescript/src/components/Footer/Footer.tsx
View File

@ -204,7 +204,7 @@ const Footer = () => {
<div className={styles["whatsapp-container"]}>
<button className={styles["button-icon"]}>
<a href="https://wa.me/">
<a href="https://wa.me/+55022997351776">
<img
src={whatsapp}
alt="whatsappicon"

7
desafio-react-e-typescript/src/index.tsx
View File

@ -1,5 +1,6 @@
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import "./global.css";
import { Home } from "./pages/Home";
@ -7,7 +8,11 @@ import { Home } from "./pages/Home";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(<Home />);
root.render(
<BrowserRouter>
<Home />
</BrowserRouter>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))