feature/breadcrumb #2

Merged
HenriqueSantosSantana merged 2 commits from feature/breadcrumb into develop 2022-12-28 14:25:36 +00:00
8 changed files with 160 additions and 2 deletions

View File

@ -1,11 +1,16 @@
import './settings/styles/index.scss'
import { Introduction } from './pages/Introduction'
import { Header } from './template/Header'
import './settings/styles/index.scss'
export function App() {
return (
<>
<Header />
<main>
<Introduction />
</main>
</>
)
}

View File

@ -0,0 +1,10 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3751_560)">
<path d="M11.9417 7.03685L5.22531 0.320703C4.79807 -0.106746 4.10537 -0.106746 3.67833 0.320703C3.25126 0.747771 3.25126 1.44043 3.67833 1.86747L9.62128 7.81023L3.67851 13.7528C3.25144 14.18 3.25144 14.8726 3.67851 15.2997C4.10558 15.7269 4.79824 15.7269 5.22548 15.2997L11.9418 8.58344C12.1554 8.3698 12.262 8.0901 12.262 7.81026C12.262 7.53029 12.1552 7.25038 11.9417 7.03685Z" fill="#C4C4C4"/>
</g>
<defs>
<clipPath id="clip0_3751_560">
<rect width="15.62" height="15.62" fill="white" transform="matrix(1 0 0 -1 0 15.6201)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 689 B

10
src/assets/icons/home.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3751_556)">
<path d="M30.9231 14.8352L28.692 12.6041L16.4147 0.326808C15.9789 -0.108936 15.2723 -0.108936 14.8365 0.326808L2.55915 12.6041L0.326936 14.8364C-0.101287 15.2798 -0.089058 15.9863 0.354338 16.4146C0.786878 16.8323 1.47257 16.8323 1.90511 16.4146L2.23099 16.0864V30.1339C2.23099 30.7503 2.73069 31.25 3.34713 31.25H27.9018C28.5182 31.25 29.0179 30.7503 29.0179 30.1339V16.0864L29.3449 16.4134C29.7883 16.8417 30.4949 16.8294 30.9231 16.386C31.3408 15.9535 31.3408 15.2677 30.9231 14.8352ZM18.9728 29.0178H12.2761V20.0888H18.9728V29.0178ZM26.7856 29.0178H21.2051V18.9727C21.2051 18.3563 20.7054 17.8566 20.0889 17.8566H11.16C10.5436 17.8566 10.0438 18.3563 10.0438 18.9727V29.0178H4.46327V13.8542L15.6244 2.69296L26.7856 13.8542V29.0178Z" fill="#C4C4C4"/>
</g>
<defs>
<clipPath id="clip0_3751_556">
<rect width="31.25" height="31.25" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1007 B

View File

@ -0,0 +1,45 @@
@use '../../settings/styles/utils/helpers/mixin' as mix;
.list {
display: inline-flex;
align-items: center;
gap: 8px;
.initial {
img {
@include mix.square(16px);
@media only screen and (min-width: 2500px) {
@include mix.square(31.25px);
}
}
}
.item {
display: inline-flex;
align-items: center;
gap: 8px;
a {
display: block;
}
}
.divider {
@include mix.square(8px);
@media only screen and (min-width: 2500px) {
@include mix.square(15.62px);
}
}
a {
color: var(--clr-gray-400);
transition: color 200ms linear;
&:hover {
color: var(--clr-primary-blue-500);
}
}
}

View File

@ -0,0 +1,35 @@
import arrowRightIcon from '../../assets/icons/arrow-right.svg'
import initialHomeIcon from '../../assets/icons/home.svg'
import css from './index.module.scss'
import { HTMLAttributes } from 'react'
interface BreadcrumbProps extends HTMLAttributes<HTMLDivElement> {
list: Array<{ name: string; href: string }>
}
export function Breadcrumb({ list, ...props }: BreadcrumbProps) {
return (
<div {...props}>
<ul className={css.list}>
<li className={css.initial}>
<a href="/">
<img src={initialHomeIcon} alt="" />
</a>
</li>
{list.map(({ name, href }) => {
return (
<li key={name + '-breadcrumb-item'} className={css.item}>
<div className={css.divider}>
<img src={arrowRightIcon} alt="ícone de divisão" />
</div>
<a href={href}>{name}</a>
</li>
)
})}
</ul>
</div>
)
}

View File

@ -0,0 +1,33 @@
@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

@ -0,0 +1,16 @@
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>
</section>
)
}

View File

@ -0,0 +1,4 @@
@mixin square($size) {
width: #{$size};
height: #{$size};
}