laravel inertia

laravel-inertia/resources/js/components/ui/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <nav aria-label="breadcrumb" :class="props.class">
+        <slot />
+    </nav>
+</template>

laravel-inertia/resources/js/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils';
+import { MoreHorizontal } from 'lucide-vue-next';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <span role="presentation" aria-hidden="true" :class="cn('flex h-9 w-9 items-center justify-center', props.class)">
+        <slot>
+            <MoreHorizontal class="h-4 w-4" />
+        </slot>
+        <span class="sr-only">More</span>
+    </span>
+</template>

laravel-inertia/resources/js/components/ui/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <li :class="cn('inline-flex items-center gap-1.5', props.class)">
+        <slot />
+    </li>
+</template>

laravel-inertia/resources/js/components/ui/breadcrumb/BreadcrumbLink.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils';
+import { Primitive, type PrimitiveProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
+    as: 'a',
+});
+</script>
+
+<template>
+    <Primitive :as="as" :as-child="asChild" :class="cn('transition-colors hover:text-foreground', props.class)">
+        <slot />
+    </Primitive>
+</template>

laravel-inertia/resources/js/components/ui/breadcrumb/BreadcrumbList.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <ol :class="cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)">
+        <slot />
+    </ol>
+</template>

laravel-inertia/resources/js/components/ui/breadcrumb/BreadcrumbPage.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <span role="link" aria-disabled="true" aria-current="page" :class="cn('font-normal text-foreground', props.class)">
+        <slot />
+    </span>
+</template>

laravel-inertia/resources/js/components/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils';
+import { ChevronRight } from 'lucide-vue-next';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <li role="presentation" aria-hidden="true" :class="cn('[&>svg]:h-3.5 [&>svg]:w-3.5', props.class)">
+        <slot>
+            <ChevronRight />
+        </slot>
+    </li>
+</template>

laravel-inertia/resources/js/components/ui/breadcrumb/index.ts

@@ -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';