From a12c2d41dab7ca3feb00fa0df7803e926009702a Mon Sep 17 00:00:00 2001
From: Bernardo Waldhelm <ernaniwaldhelm@gmail.com>
Date: Fri, 13 Jan 2023 12:19:17 -0300
Subject: [PATCH] =?UTF-8?q?feat(home):=20iniciando=20componentiza=C3=A7?=
 =?UTF-8?q?=C3=A3o=20dos=20atoms=20e=20alocando=20os=20mesmo,=20come=C3=A7?=
 =?UTF-8?q?ando=20pelo=20breadcrumb?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Atoms/Icones/Icone.tsx         | 15 +++++
 .../Atoms/TitleBread/TitleBread.tsx           | 11 ++++
 .../Breadcrumbs/Breadcrumbs.module.scss       | 56 ++++++++-----------
 .../molecules/Breadcrumbs/Breadcrumbs.tsx     | 22 ++------
 4 files changed, 54 insertions(+), 50 deletions(-)
 create mode 100644 src/components/Atoms/Icones/Icone.tsx
 create mode 100644 src/components/Atoms/TitleBread/TitleBread.tsx

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 (
+        <li>
+            <img src={src} alt={alt} className={className} />
+        </li>
+    );
+};
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 <li className={className}> {text} </li>
+}
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 (
         <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>
     );