BernardoWaldhelm/desafio-react-e-typescript-bernardo-waldhelm
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(home): iniciando componentização dos atoms e alocando os mesmo, começando pelo breadcrumb

Browse Source
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2023-01-13 12:19:17 -03:00
parent ef6ea802f8
commit a12c2d41da
4 changed files with 54 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Atoms/Icones/Icone.tsx Normal file
View File

@ -0,0 +1,15 @@
interface iconProps {
src: string;
alt: string;
className?: string;
}
export const Icone = (props: iconProps) => {
const { src, alt, className } = props;
return (
<li>
<img src={src} alt={alt} className={className} />
</li>
);
};

11
src/components/Atoms/TitleBread/TitleBread.tsx Normal file
View File

@ -0,0 +1,11 @@
interface IProps {
text: string,
className?: string
}
export const TitleBread = (props: IProps) => {
const {text, className} = props;
return <li className={className}> {text} </li>
}

56
src/components/molecules/Breadcrumbs/Breadcrumbs.module.scss
View File

@ -17,9 +17,21 @@
list-style: none;
gap: 8px;
&__item {
li {
&__home {
text-decoration: none;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 28px;
text-transform: uppercase;
color: $color-primary-400;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
font-size: 12px;
line-height: 14px;
}
img {
display: flex;
align-items: center;
@ -31,38 +43,16 @@
width: 16px;
height: 16px;
}
&.seta {
width: 15.62px;
height: 15.62px;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
width: 8px;
height: 8px;
}
}
}
}
}
&__seta {
img {
width: 15.62px;
height: 15.62px;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
width: 8px;
height: 8px;
}
}
}
&__link {
a {
text-decoration: none;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 28px;
text-transform: uppercase;
color: $color-primary-400;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
font-size: 12px;
line-height: 14px;
}
}
}
}
}

22
src/components/molecules/Breadcrumbs/Breadcrumbs.tsx
View File

@ -2,28 +2,16 @@ import styles from "./Breadcrumbs.module.scss";
import home from "../../../assets/imgs/icon-home.png";
import seta from "../../../assets/imgs/arrow-point-to-right.png";
import { Icone } from "../../Atoms/Icones/Icone";
import { TitleBread } from "../../Atoms/TitleBread/TitleBread";
const BreadCrumbs = () => {
return (
<section className={styles["breadcrumbs"]}>
<ul className={styles["breadcrumbs__list"]}>
<li className={styles["breadcrumbs__list__item"]}>
<a
className={styles["breadcrumbs__list__item__home"]}
href="/"
rel="noreferrer"
>
<img src={home} alt="Logo Home" />
</a>
</li>
<li className={styles["breadcrumbs__list__seta"]}>
<img src={seta} alt="Logo Home" />
</li>
<li className={styles["breadcrumbs__list__link"]}>
<a href="/" rel="noreferrer">
Institucional
</a>
</li>
<Icone src={home} alt="Home" />
<Icone src={seta} alt="Seta" className={styles["seta"]} />
<TitleBread text="Institucional" />
</ul>
</section>
);