From 73957874624014959b74eae85dc196683e75704b Mon Sep 17 00:00:00 2001
From: ThiagoDuutra <thiagoduutra01@gmail.com>
Date: Mon, 9 Jan 2023 16:57:07 -0300
Subject: [PATCH] feat: Cria BreadCrumb

---
 .../src/Components/BreadCrumb/index.tsx       | 32 ++++++++++++++++++
 .../src/Components/BreadCrumb/style.css       | 33 +++++++++++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 react-academy/src/Components/BreadCrumb/index.tsx
 create mode 100644 react-academy/src/Components/BreadCrumb/style.css

diff --git a/react-academy/src/Components/BreadCrumb/index.tsx b/react-academy/src/Components/BreadCrumb/index.tsx
new file mode 100644
index 0000000..378146d
--- /dev/null
+++ b/react-academy/src/Components/BreadCrumb/index.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import home from "./BreadImages/home.png";
+import arrow from "./BreadImages/arrow.png";
+
+import "./style.css";
+
+const BreadCrumb = () => {
+  return (
+    <div className="container-bread">
+      <div className="BreadCrumb">
+        <a href="/sobre">
+          <img
+            className="BreadCrump-image1"
+            src={home}
+            alt="Ícone Home BreadCrumb"
+          />
+        </a>
+
+        <img
+          className="BreadCrump-image2"
+          src={arrow}
+          alt="Ícone Arrow BreadCrumb"
+        />
+        <a className="BreadCrumb-text" href="/">
+          INSTITUCIONAL
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default BreadCrumb;
diff --git a/react-academy/src/Components/BreadCrumb/style.css b/react-academy/src/Components/BreadCrumb/style.css
new file mode 100644
index 0000000..448689b
--- /dev/null
+++ b/react-academy/src/Components/BreadCrumb/style.css
@@ -0,0 +1,33 @@
+.BreadCrumb {
+  display: flex;
+  align-items: center;
+  margin: 29px 0px 80px 100px;
+  gap: 8px;
+}
+
+.BreadCrump-image1 {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+
+.BreadCrump-image2 {
+  display: block;
+  width: 8px;
+  height: 8px;
+}
+
+.BreadCrumb-text {
+  font-family: "Roboto", sans-serif;
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 400;
+  text-decoration: none;
+  color: var(--color-gray-200);
+}
+
+@media screen and (max-width: 1024px) {
+  .BreadCrumb {
+    margin-left: 16px;
+  }
+}