feat: add breadcrumb components and main dialog layout functionality

src/components/ui/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,11 @@
+<script setup>
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <nav aria-label="breadcrumb" data-slot="breadcrumb" :class="props.class">
+        <slot />
+    </nav>
+</template>

src/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -0,0 +1,21 @@
+<script setup>
+    import { MoreHorizontal } from 'lucide-vue-next';
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <span
+        data-slot="breadcrumb-ellipsis"
+        role="presentation"
+        aria-hidden="true"
+        :class="cn('flex size-9 items-center justify-center', props.class)">
+        <slot>
+            <MoreHorizontal class="size-4" />
+        </slot>
+        <span class="sr-only">More</span>
+    </span>
+</template>

src/components/ui/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,13 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <li data-slot="breadcrumb-item" :class="cn('inline-flex items-center gap-1.5', props.class)">
+        <slot />
+    </li>
+</template>

src/components/ui/breadcrumb/BreadcrumbLink.vue

@@ -0,0 +1,20 @@
+<script setup>
+    import { Primitive } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false, default: 'a' },
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <Primitive
+        data-slot="breadcrumb-link"
+        :as="as"
+        :as-child="asChild"
+        :class="cn('hover:text-foreground transition-colors', props.class)">
+        <slot />
+    </Primitive>
+</template>

src/components/ui/breadcrumb/BreadcrumbList.vue

@@ -0,0 +1,17 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <ol
+        data-slot="breadcrumb-list"
+        :class="
+            cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)
+        ">
+        <slot />
+    </ol>
+</template>

src/components/ui/breadcrumb/BreadcrumbPage.vue

@@ -0,0 +1,18 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <span
+        data-slot="breadcrumb-page"
+        role="link"
+        aria-disabled="true"
+        aria-current="page"
+        :class="cn('text-foreground font-normal', props.class)">
+        <slot />
+    </span>
+</template>

src/components/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -0,0 +1,20 @@
+<script setup>
+    import { ChevronRight } from 'lucide-vue-next';
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <li
+        data-slot="breadcrumb-separator"
+        role="presentation"
+        aria-hidden="true"
+        :class="cn('[&>svg]:size-3.5', props.class)">
+        <slot>
+            <ChevronRight />
+        </slot>
+    </li>
+</template>

src/components/ui/breadcrumb/index.js

@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from './Breadcrumb.vue';
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue';
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue';
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue';
+export { default as BreadcrumbList } from './BreadcrumbList.vue';
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue';
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue';