diff --git a/src/components/Atoms/Icones/Icone.tsx b/src/components/Atoms/Icones/Icone.tsx new file mode 100644 index 0000000..696b1b6 --- /dev/null +++ b/src/components/Atoms/Icones/Icone.tsx @@ -0,0 +1,15 @@ +interface iconProps { + src: string; + alt: string; + className?: string; +} + +export const Icone = (props: iconProps) => { + const { src, alt, className } = props; + + return ( +
  • + {alt} +
  • + ); +}; diff --git a/src/components/Atoms/TitleBread/TitleBread.tsx b/src/components/Atoms/TitleBread/TitleBread.tsx new file mode 100644 index 0000000..f32be43 --- /dev/null +++ b/src/components/Atoms/TitleBread/TitleBread.tsx @@ -0,0 +1,11 @@ +interface IProps { + text: string, + className?: string +} + +export const TitleBread = (props: IProps) => { + + const {text, className} = props; + + return
  • {text}
  • +} diff --git a/src/components/molecules/Breadcrumbs/Breadcrumbs.module.scss b/src/components/molecules/Breadcrumbs/Breadcrumbs.module.scss index 75df349..4c26955 100644 --- a/src/components/molecules/Breadcrumbs/Breadcrumbs.module.scss +++ b/src/components/molecules/Breadcrumbs/Breadcrumbs.module.scss @@ -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; - } - } } } } diff --git a/src/components/molecules/Breadcrumbs/Breadcrumbs.tsx b/src/components/molecules/Breadcrumbs/Breadcrumbs.tsx index 2bd8416..5ffa2ae 100644 --- a/src/components/molecules/Breadcrumbs/Breadcrumbs.tsx +++ b/src/components/molecules/Breadcrumbs/Breadcrumbs.tsx @@ -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 (
    );