From 48ec850f0f3d2823b089f96c8f43098116826853 Mon Sep 17 00:00:00 2001
From: WellingtonWDS <wellingtonuserr@gmail.com>
Date: Mon, 16 Jan 2023 10:37:23 -0300
Subject: [PATCH] feat(breadcrumb): Adicionando breadcrumb mobile, desktop e
 2500px+

---
 src/App.tsx                                   |  8 ++-
 src/components/Breadcrumb/Breadcrumb.scss     | 54 +++++++++++++++++++
 src/components/Breadcrumb/Breadcrumb.tsx      | 21 ++++++++
 .../Breadcrumb/assets/arrow-right.svg         | 10 ++++
 src/components/Breadcrumb/assets/home.svg     | 10 ++++
 src/components/Header/Header.scss             |  2 +-
 6 files changed, 103 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Breadcrumb/Breadcrumb.scss
 create mode 100644 src/components/Breadcrumb/Breadcrumb.tsx
 create mode 100644 src/components/Breadcrumb/assets/arrow-right.svg
 create mode 100644 src/components/Breadcrumb/assets/home.svg

diff --git a/src/App.tsx b/src/App.tsx
index 9661996..c38b56c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,14 @@
 import React from "react";
 import { Header } from "./components/Header/Header";
+import { Breadcrumb } from "./components/Breadcrumb/Breadcrumb";
 
 function App() {
-  return <Header />;
+  return (
+    <>
+      <Header />
+      <Breadcrumb />
+    </>
+  );
 }
 
 export default App;
diff --git a/src/components/Breadcrumb/Breadcrumb.scss b/src/components/Breadcrumb/Breadcrumb.scss
new file mode 100644
index 0000000..c29edbb
--- /dev/null
+++ b/src/components/Breadcrumb/Breadcrumb.scss
@@ -0,0 +1,54 @@
+.breadcrumb {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 30px 100px;
+
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  color: #c4c4c4;
+
+  .home-icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  .arrow-right {
+    width: 8px;
+    height: 8px;
+  }
+
+  .breadcrumb-item {
+    text-transform: uppercase;
+    margin: 0;
+  }
+}
+
+// Telas 2500+
+@media (min-width: 2500px) {
+  .breadcrumb {
+    font-size: 24px;
+    line-height: 28px;
+
+    .home-icon {
+      width: 32px;
+      height: 32px;
+    }
+
+    .arrow-right {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .breadcrumb {
+    padding: 30px 16px;
+  }
+}
diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx
new file mode 100644
index 0000000..6ba3405
--- /dev/null
+++ b/src/components/Breadcrumb/Breadcrumb.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import "./Breadcrumb.scss";
+import home from "./assets/home.svg";
+import arrowRight from "./assets/arrow-right.svg";
+
+const Breadcrumb = () => {
+  return (
+    <div className="breadcrumb">
+      <span>
+        <img src={home} alt="" className="home-icon" />
+      </span>
+
+      <span>
+        <img src={arrowRight} alt="" className="arrow-right" />
+      </span>
+
+      <p className="breadcrumb-item">Institucional</p>
+    </div>
+  );
+};
+export { Breadcrumb };
diff --git a/src/components/Breadcrumb/assets/arrow-right.svg b/src/components/Breadcrumb/assets/arrow-right.svg
new file mode 100644
index 0000000..a8a0fcc
--- /dev/null
+++ b/src/components/Breadcrumb/assets/arrow-right.svg
@@ -0,0 +1,10 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_310)">
+<path d="M6.11608 3.60396L2.6762 0.164193C2.45738 -0.0547314 2.10261 -0.0547314 1.8839 0.164193C1.66517 0.382921 1.66517 0.737679 1.8839 0.95639L4.92766 4.00006L1.88398 7.04362C1.66525 7.26244 1.66525 7.61716 1.88398 7.83589C2.10271 8.0547 2.45747 8.0547 2.67629 7.83589L6.11617 4.39607C6.22553 4.28665 6.28015 4.1434 6.28015 4.00008C6.28015 3.85668 6.22543 3.71332 6.11608 3.60396Z" fill="#C4C4C4"/>
+</g>
+<defs>
+<clipPath id="clip0_1_310">
+<rect width="8" height="8" fill="white" transform="matrix(1 0 0 -1 0 8)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/Breadcrumb/assets/home.svg b/src/components/Breadcrumb/assets/home.svg
new file mode 100644
index 0000000..898d772
--- /dev/null
+++ b/src/components/Breadcrumb/assets/home.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_306)">
+<path d="M15.8326 7.59562L14.6903 6.4533L8.40431 0.167326C8.18118 -0.0557753 7.81942 -0.0557753 7.59628 0.167326L1.31028 6.4533L0.167381 7.59623C-0.0518699 7.82324 -0.0456085 8.185 0.18141 8.40425C0.402871 8.61814 0.753946 8.61814 0.975407 8.40425L1.14226 8.23623V15.4285C1.14226 15.7442 1.3981 16 1.71372 16H14.2857C14.6013 16 14.8572 15.7442 14.8572 15.4285V8.23623L15.0246 8.40368C15.2516 8.62293 15.6134 8.61664 15.8326 8.38965C16.0465 8.16819 16.0465 7.81708 15.8326 7.59562ZM9.71409 14.8571H6.28537V10.2855H9.71409V14.8571ZM13.7142 14.8571H10.857V9.71403C10.857 9.39841 10.6011 9.14256 10.2855 9.14256H5.7139C5.39829 9.14256 5.14244 9.39841 5.14244 9.71403V14.8571H2.28518V7.09334L7.99969 1.3788L13.7142 7.09334V14.8571Z" fill="#C4C4C4"/>
+</g>
+<defs>
+<clipPath id="clip0_1_306">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
index 70ac755..55afd85 100644
--- a/src/components/Header/Header.scss
+++ b/src/components/Header/Header.scss
@@ -175,7 +175,7 @@ header {
   }
 }
 
-// Tablet  < 720
+// Tablet  <= 1024
 @media screen and (max-width: 1024px) {
   header {
     .header-top {