From 0e638b829ce783c2cce377b2f56ac0c8e33d8e50 Mon Sep 17 00:00:00 2001
From: Bernardo Waldhelm <ernaniwaldhelm@gmail.com>
Date: Thu, 5 Jan 2023 10:32:20 -0300
Subject: [PATCH] feat(home): adicionando breadcrumbs desktop e mobile

---
 src/assets/imgs/arrow-point-to-right.png      | Bin 0 -> 282 bytes
 src/assets/imgs/icon-home.png                 | Bin 0 -> 472 bytes
 .../Breadcrumbs/Breadcrumbs.module.scss       |  68 ++++++++++++++++++
 src/components/Breadcrumbs/Breadcrumbs.tsx    |  28 ++++++++
 src/pages/Home.tsx                            |   3 +-
 5 files changed, 98 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/imgs/arrow-point-to-right.png
 create mode 100644 src/assets/imgs/icon-home.png
 create mode 100644 src/components/Breadcrumbs/Breadcrumbs.module.scss
 create mode 100644 src/components/Breadcrumbs/Breadcrumbs.tsx

diff --git a/src/assets/imgs/arrow-point-to-right.png b/src/assets/imgs/arrow-point-to-right.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5625c06eb563e7232ed4cb127efdc7b85131f8a
GIT binary patch
literal 282
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9GG!XV7ZFl&wkP>``W
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{(4Ur$B+ufsT0rgGARnU{hYX4HHUkirG)lI
zR_h6GkNA0T+|f<+{=lPXF~iic{N~)BLQIFB?Da9~G5vV&{(~t3hvq6O-&!=KXik3f
z)DQpppWkujDEw<;X&&`@qRIlViuH|COIRaLE@M!>DZ0kPPoc7|I*EVVH9m&<&x^VY
z_gxSUiO@`aXc=O$w4~8TgOTkW*M<+P8kqE1LUue$=MM66Zp`M(omgz9pt)g{AoKM-
ZjC?F5llH%vl?rq^gQu&X%Q~loCIGB^Vw?Z~

literal 0
HcmV?d00001

diff --git a/src/assets/imgs/icon-home.png b/src/assets/imgs/icon-home.png
new file mode 100644
index 0000000000000000000000000000000000000000..05c6e0674d584d3eddb8a9abfe4967708eb2ce4f
GIT binary patch
literal 472
zcmV;}0Vn>6P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0c}Y{K~#7F?Uu`J
zgfI|>$Cg*(NC(+;K#mBIHYKEjl#mj_c90TMLQ(+-KpaB{p@VQl;+1g(h#<7s26N&+
z?2702;W2ms6q6*$a~Os{aU8$GiV#o;hu3xeKHP*5-*KEPD1?G!Ch&~^v~BCFj)auJ
z1fG^<`GD~28VTVN%)lQpIp4s!;A0v7;Iicq61WBLqbji|AOc?_LAHXcN{}t#DiUOC
zxU2-x0hf^=y5OP`L?>KCg6M{iB;FAIGL@jyg#|yUpIgJbe2f^wXPb`Ud#01H7+*{%
zrFZym;eHEtNYBJFq|Ea?pYM#KD7bY|5Co=S80ON=i=xPvO4u`b7zpNcI(=ce&I0G<
zD0?qDk7W9Rv*39qV@$Y|!Xwb9X__Z|%5?4+j?gzqMp^*h;oP?EZ0;D&Ban@BPq=js
zfkWUB7#fmpEx5oAab0)d4kLgol#U)?F4=hFUr&f#%LO#2s;YFnQ2hdfGC5$k<Z+Au
O0000<MNUMnLSTY(Zp9S<

literal 0
HcmV?d00001

diff --git a/src/components/Breadcrumbs/Breadcrumbs.module.scss b/src/components/Breadcrumbs/Breadcrumbs.module.scss
new file mode 100644
index 0000000..bd2a5d8
--- /dev/null
+++ b/src/components/Breadcrumbs/Breadcrumbs.module.scss
@@ -0,0 +1,68 @@
+@import '../../variaveis';
+
+.breadcrumbs {
+    padding: 29px 100px;
+    width: calc(100% - 200px);
+    margin-bottom: 51px;
+
+    @media #{$mq-tablet}, #{$mq-mobile}{
+        padding: 29px 16px;
+        width: calc(100% - 32px);
+    }
+
+    &__list {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        list-style: none;
+        gap: 8px;
+
+        &__item {
+
+            &__home {
+                img {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 31.25px;
+                    height: 31.25px;
+
+                    @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile}{
+                        width: 16px;
+                        height: 16px;
+                    }
+                }
+            }
+        }
+
+        &__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/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
new file mode 100644
index 0000000..f6ab28d
--- /dev/null
+++ b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,28 @@
+import styles from './Breadcrumbs.module.scss'
+
+import home  from '../../assets/imgs/icon-home.png'
+import seta from '../../assets/imgs/arrow-point-to-right.png'
+
+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>
+            </ul>
+        </section>
+    )
+}
+
+export { BreadCrumbs }
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index f247586..d67805e 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -2,12 +2,13 @@ import styles from './Home.module.scss'
 
 import { Footer } from '../components/Footer/Footer';
 import { Header } from '../components/Header/Header';
+import { BreadCrumbs } from '../components/Breadcrumbs/Breadcrumbs';
 
 function Home() {
     return (
         <div className={styles['home']}>
             <Header />
-            <div></div>
+            <BreadCrumbs />
             <Footer />
         </div>
     );