From 815e07c13262607f2f0e701423b8b85d7996cf9c Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sat, 19 Dec 2020 15:09:35 +0100
Subject: [PATCH] Breadcrumb component

---
 src/components/BreadcrumbNav.svelte | 62 +++++++++++++++++++++++++++++
 src/components/Dashboard.svelte     |  2 +
 2 files changed, 64 insertions(+)
 create mode 100644 src/components/BreadcrumbNav.svelte

diff --git a/src/components/BreadcrumbNav.svelte b/src/components/BreadcrumbNav.svelte
new file mode 100644
index 00000000..c5671dcc
--- /dev/null
+++ b/src/components/BreadcrumbNav.svelte
@@ -0,0 +1,62 @@
+<div class="flex flex-row mb-4">
+  <div class="w-full">
+    <nav class="w-full flex">
+      <ol class="list-none flex flex-row items-center justify-start">
+        <li class="mr-2 flex items-center">
+          <svg
+            stroke="currentColor"
+            fill="none"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="h-3 w-3 stroke-current"
+            height="1em"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"><path
+              d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+            <polyline points="9 22 9 12 15 12 15 22" /></svg>
+        </li>
+        <li class="flex items-center">
+          <a class="mr-2" href="/">Home</a><svg
+            stroke="currentColor"
+            fill="none"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="h-3 w-3 mr-2 stroke-current"
+            height="1em"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"><line
+              x1="5"
+              y1="12"
+              x2="19"
+              y2="12" />
+            <polyline points="12 5 19 12 12 19" /></svg>
+        </li>
+        <li class="flex items-center">
+          <a class="mr-2" href="/">Second level</a><svg
+            stroke="currentColor"
+            fill="none"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="h-3 w-3 mr-2 stroke-current"
+            height="1em"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"><line
+              x1="5"
+              y1="12"
+              x2="19"
+              y2="12" />
+            <polyline points="12 5 19 12 12 19" /></svg>
+        </li>
+        <li class="flex items-center">
+          <a class="mr-2" href="/">Third level</a>
+        </li>
+      </ol>
+    </nav>
+  </div>
+</div>
diff --git a/src/components/Dashboard.svelte b/src/components/Dashboard.svelte
index ab621582..078316ce 100644
--- a/src/components/Dashboard.svelte
+++ b/src/components/Dashboard.svelte
@@ -4,6 +4,7 @@
   import Pagination from "./Pagination.svelte";
   import FormLayout from "./FormLayout.svelte";
   import Tracks from "./Tracks.svelte";
+  import BreadcrumbNav from "./BreadcrumbNav.svelte";
 </script>
 
 <div>
@@ -275,6 +276,7 @@
   </header>
   <main>
     <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+      <BreadcrumbNav/>
       <!--  -->
       <StatCards />
       <!--  -->