From 38e13957734e484a19a0590530e0f8df5e295be1 Mon Sep 17 00:00:00 2001
From: Ruhshan <5312918+Ruhshan@users.noreply.github.com>
Date: Sun, 25 Aug 2024 03:38:03 +0600
Subject: [PATCH] Add BreadCrumb component

---
 frontend-vue3/src/components/BreadCrumb.vue   | 45 +++++++++++++++++++
 frontend-vue3/src/components/TopBar.vue       |  4 +-
 .../src/components/__tests__/TopBar.spec.ts   |  8 ++--
 frontend-vue3/src/router/index.ts             |  2 +-
 frontend-vue3/src/views/GuideView.vue         |  8 ++--
 5 files changed, 56 insertions(+), 11 deletions(-)
 create mode 100644 frontend-vue3/src/components/BreadCrumb.vue

diff --git a/frontend-vue3/src/components/BreadCrumb.vue b/frontend-vue3/src/components/BreadCrumb.vue
new file mode 100644
index 0000000..98fa74d
--- /dev/null
+++ b/frontend-vue3/src/components/BreadCrumb.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+
+import {ref} from "vue";
+
+interface Props {
+  title: string
+  itemName: string
+}
+
+interface BreadCrumbItem {
+  title: string
+  disabled: boolean
+  href: string
+}
+
+const props = defineProps<Props>()
+
+const breadCrumbItems = ref<BreadCrumbItem[]>([
+  {
+    title: 'Home',
+    disabled: false,
+    href: '/'
+  },
+  {
+    title: props.itemName,
+    disabled: true,
+    href: ''
+  }
+])
+
+</script>
+
+<template>
+  <div class="bg-section">
+    <v-container style="margin-top: 122px">
+      <v-breadcrumbs :items="breadCrumbItems" class="position-relative d-flex justify-end">
+        <template v-slot:prepend>
+          <h2 class="position-absolute left-0">{{ props.title }}</h2>
+        </template>
+      </v-breadcrumbs>
+    </v-container>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/frontend-vue3/src/components/TopBar.vue b/frontend-vue3/src/components/TopBar.vue
index 2565728..ed55dc5 100644
--- a/frontend-vue3/src/components/TopBar.vue
+++ b/frontend-vue3/src/components/TopBar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-const homeRoute = {name:'home'}
-const guideRoute =  {name: 'guide'}
+const homeRoute = { name: 'home' }
+const guideRoute = { name: 'guide' }
 </script>
 
 <template>
diff --git a/frontend-vue3/src/components/__tests__/TopBar.spec.ts b/frontend-vue3/src/components/__tests__/TopBar.spec.ts
index 8e260b5..630d6ed 100644
--- a/frontend-vue3/src/components/__tests__/TopBar.spec.ts
+++ b/frontend-vue3/src/components/__tests__/TopBar.spec.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import {DOMWrapper, mount} from '@vue/test-utils'
+import { DOMWrapper, mount } from '@vue/test-utils'
 
 import { createVuetify } from 'vuetify'
 import * as components from 'vuetify/components'
@@ -12,7 +12,7 @@ const vuetify = createVuetify({
 })
 
 import TopBar from '../../App.vue'
-import router from "../../router";
+import router from '../../router'
 
 describe('TopBar.vue', () => {
   const wrapper = mount(TopBar, {
@@ -24,8 +24,8 @@ describe('TopBar.vue', () => {
     }
   })
 
-  const findRouterLinkTo = (component: DOMWrapper<Element> ) =>
-      component.findComponent(RouterLinkStub).props().to
+  const findRouterLinkTo = (component: DOMWrapper<Element>) =>
+    component.findComponent(RouterLinkStub).props().to
 
   it('renders the title "MPDB 2.0"', async () => {
     const title = wrapper.find('[data-testid="app-title"]')
diff --git a/frontend-vue3/src/router/index.ts b/frontend-vue3/src/router/index.ts
index 8c05905..827e320 100644
--- a/frontend-vue3/src/router/index.ts
+++ b/frontend-vue3/src/router/index.ts
@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '@/views/HomeView.vue'
-import GuideView from "@/views/GuideView.vue";
+import GuideView from '@/views/GuideView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
diff --git a/frontend-vue3/src/views/GuideView.vue b/frontend-vue3/src/views/GuideView.vue
index 3471750..adc241f 100644
--- a/frontend-vue3/src/views/GuideView.vue
+++ b/frontend-vue3/src/views/GuideView.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import BreadCrumb from '@/components/BreadCrumb.vue'
+
 
 </script>
 
 <template>
-I am guide view
+  <BreadCrumb title="Guide" item-name="Guide"></BreadCrumb>
 </template>
 
-<style scoped>
-
-</style>
\ No newline at end of file
+<style scoped></style>