feat(routes): created routes for initial page #4

Merged
HenriqueSantosSantana merged 1 commits from feature/router into develop 2022-12-30 15:53:30 +00:00
8 changed files with 138 additions and 52 deletions

View File

@ -1,19 +1,12 @@
import { Footer } from './template/Footer'
import { Header } from './template/Header'
import { Introduction } from './pages/Introduction'
import { BrowserRouter } from 'react-router-dom'
import { Router } from './settings/routes'
import './settings/styles/index.scss'
export function App() {
return (
<>
<Header />
<main>
<Introduction />
</main>
<Footer />
</>
<BrowserRouter>
<Router />
</BrowserRouter>
)
}

View File

@ -1,33 +1 @@
@use '../../settings/styles/utils/helpers/functions' as function;
.introduction {
margin-top: 29px;
@media screen and (min-width: 2500px) {
margin-top: 31px;
}
}
.container {
width: 100%;
padding: 0 16px;
@media screen and (min-width: 1025px) {
width: function.fluid(1080px, 1280px);
margin: 0 auto;
padding: 0;
}
@media screen and (min-width: 2500px) {
width: function.fluid(2299.68px, 2500px);
}
}
.breadcrumb {
a {
font-size: var(--txt-xs);
line-height: 14.06px;
text-transform: uppercase;
}
}

View File

@ -1,16 +1,9 @@
import { useMemo } from 'react'
import { Breadcrumb } from '../../components/Breadcrumb'
import css from './index.module.scss'
export function Introduction() {
let listBreadcrumb = useMemo(() => [{ name: 'Introduction', href: '/' }], [])
return (
<section className={css.introduction}>
<div className={css.container}>
<Breadcrumb className={css.breadcrumb} list={listBreadcrumb} />
</div>
<div className={css.container}></div>
</section>
)
}

View File

@ -0,0 +1,40 @@
@use '../../settings/styles/utils/helpers/functions' as function;
main :global {
.main-container {
width: 100%;
@media screen and (min-width: 1025px) {
width: function.fluid(748px, 1080px);
}
@media screen and (min-width: 2500px) {
width: function.fluid(1680px, 2299.68px);
}
}
}
.breadcrumb :global {
a {
font-size: var(--txt-xs);
line-height: 14.06px;
text-transform: uppercase;
}
}
.breadcrumb-container {
width: 100%;
padding: 0 16px;
margin-top: 29px;
@media screen and (min-width: 1025px) {
width: function.fluid(1080px, 1280px);
margin: 29px auto 0;
padding: 0;
}
@media screen and (min-width: 2500px) {
width: function.fluid(2299.68px, 2500px);
}
}

View File

@ -0,0 +1,59 @@
import { useMemo } from 'react'
import { Outlet, Route, Routes } from 'react-router-dom'
import { Breadcrumb } from '../../components/Breadcrumb'
import { Footer } from '../../template/Footer'
import { Header } from '../../template/Header'
import { Sidebar } from '../../template/Sidebar'
import css from './index.module.scss'
export function Router() {
let listBreadcrumb = useMemo(() => [{ name: 'Introduction', href: '/' }], [])
return (
<Routes>
<Route
path="/"
element={
<>
<Header />
<div className={css['breadcrumb-container']}>
<Breadcrumb className={css.breadcrumb} list={listBreadcrumb} />
</div>
<div className="window-content">
<Outlet />
</div>
<Footer />
</>
}
>
<Route
path="/"
element={
<>
<div>
<h1>Institutional</h1>
<Sidebar />
<main>
<div className="main-container">
<Outlet />
</div>
</main>
</div>
</>
}
>
<Route
index
element={
<>
<h2>Sobre</h2>
</>
}
/>
<Route path="/signup" element={<h2>Preencha o formulário</h2>} />
</Route>
</Route>
</Routes>
)
}

View File

@ -1,4 +1,5 @@
@use '../utils/resources/colors' as var;
@use '../utils/helpers/functions' as function;
@use '../utils/resources/fonts' as fonts;
:root {
@ -46,3 +47,16 @@ button,
textarea {
font-family: var(--font-family-100);
}
.window-content {
width: 100%;
padding: 0 16px;
@media screen and (min-width: 1025px) {
width: function.fluid(1080px, 1280px);
padding: 0;
}
@media screen and (min-width: 2500px) {
width: function.fluid(2299.68px, 2500px);
}
}

View File

View File

@ -0,0 +1,19 @@
import { Link } from 'react-router-dom'
export function Sidebar() {
return (
<aside>
<li>
<Link to={'/'}>Initial</Link>
</li>
<li>
<Link to={'/about'}>About</Link>
</li>
<li>
<Link to={'/signup'}>Sign up</Link>
</li>
</aside>
)
}