From 4b031ccb072dd180fdb411d089bed9f6cb3af987 Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Fri, 11 Aug 2023 10:44:40 +0300
Subject: [PATCH] feat: add breadcrumbs bar for the connection page

---
 .../BreadcrumbBar/BreadcrumbBar.tsx           | 15 ++++++++
 .../BreadcrumbBar/breadcrumbbar.css           | 35 +++++++++++++++++++
 src/components/BreadcrumbBar/chevron.svg      |  3 ++
 3 files changed, 53 insertions(+)
 create mode 100644 src/components/BreadcrumbBar/BreadcrumbBar.tsx
 create mode 100644 src/components/BreadcrumbBar/breadcrumbbar.css
 create mode 100644 src/components/BreadcrumbBar/chevron.svg

diff --git a/src/components/BreadcrumbBar/BreadcrumbBar.tsx b/src/components/BreadcrumbBar/BreadcrumbBar.tsx
new file mode 100644
index 00000000..994f6691
--- /dev/null
+++ b/src/components/BreadcrumbBar/BreadcrumbBar.tsx
@@ -0,0 +1,15 @@
+import './breadcrumbbar.css'
+
+function BreadcrumbBar(){
+    return(
+        <nav className="breadcrumb-bar-nav">
+            <ul className="breadcrumb-bar-ul">
+                <li className="breadcrumb-bar-li">Nodes</li>
+                <li className="breadcrumb-bar-li">Nimbus</li>
+                <li className="breadcrumb-bar-li">Connect Device</li>
+            </ul>
+        </nav>
+    )
+}
+
+export default BreadcrumbBar
\ No newline at end of file
diff --git a/src/components/BreadcrumbBar/breadcrumbbar.css b/src/components/BreadcrumbBar/breadcrumbbar.css
new file mode 100644
index 00000000..9729a000
--- /dev/null
+++ b/src/components/BreadcrumbBar/breadcrumbbar.css
@@ -0,0 +1,35 @@
+.breadcrumb-bar-nav {
+    width: 100%;
+    flex: 1 1 100%;
+    padding: 1rem 2rem;
+    margin: 0.5rem;
+}
+.breadcrumb-bar-ul {
+    list-style-type: none;
+    display: flex;
+    padding: 0;
+    margin: 0;
+}
+.breadcrumb-bar-li {
+    padding: 0 1em;
+    color: #647084;
+    font-size: 15px;
+    font-weight: 500;
+    position: relative;
+}
+.breadcrumb-bar-li::after {
+    display: inline-block;
+    content: url("./chevron.svg");
+    color: #09101C;
+    position: absolute;
+    top: -2px;
+    left: 100%;
+    transform: translateX(-50%);
+}
+.breadcrumb-bar-li:last-child { 
+    color: #09101C;
+
+}
+.breadcrumb-bar-li:last-child::after {
+    display: none;
+}
\ No newline at end of file
diff --git a/src/components/BreadcrumbBar/chevron.svg b/src/components/BreadcrumbBar/chevron.svg
new file mode 100644
index 00000000..51d118e0
--- /dev/null
+++ b/src/components/BreadcrumbBar/chevron.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+    <path d="M7.75006 14.5L12.2503 9.99994L7.75 5.50002" stroke="#09101C" stroke-width="1.2"/>
+    </svg>
\ No newline at end of file