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 (
+
+
+
+ );
+};
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 (
);