Add BreadCrumb component

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>

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>

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"]')

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),

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>
+<style scoped></style>