feat: adiciona rotas do menu e conserta caminhos e disposição de pastas
This commit is contained in:
parent
0a47ff7f25
commit
87d13d5e91
@ -1,6 +0,0 @@
|
||||
import React from "react";
|
||||
import Routes from "./Routes";
|
||||
|
||||
export default function App() {
|
||||
return <Routes />;
|
||||
}
|
||||
@ -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;
|
||||
@ -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 {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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 };
|
||||
@ -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"
|
||||
|
||||
@ -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))
|
||||
|
||||
Loading…
Reference in New Issue
Block a user