62 lines
2.0 KiB
Vue
62 lines
2.0 KiB
Vue
<script lang="ts">
|
|
export const description = 'A sidebar with a collapsible file tree.'
|
|
export const iframeHeight = '800px'
|
|
</script>
|
|
|
|
<script setup lang="ts">
|
|
import AppSidebar from '@/registry/new-york/block/Sidebar11/components/AppSidebar.vue'
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbPage,
|
|
BreadcrumbSeparator,
|
|
} from '@/registry/new-york/ui/breadcrumb'
|
|
import { Separator } from '@/registry/new-york/ui/separator'
|
|
import {
|
|
SidebarInset,
|
|
SidebarProvider,
|
|
SidebarTrigger,
|
|
} from '@/registry/new-york/ui/sidebar'
|
|
</script>
|
|
|
|
<template>
|
|
<SidebarProvider>
|
|
<AppSidebar />
|
|
<SidebarInset>
|
|
<header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
|
|
<SidebarTrigger class="-ml-1" />
|
|
<Separator orientation="vertical" class="mr-2 h-4" />
|
|
<Breadcrumb>
|
|
<BreadcrumbList>
|
|
<BreadcrumbItem class="hidden md:block">
|
|
<BreadcrumbLink href="#">
|
|
components
|
|
</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
<BreadcrumbSeparator class="hidden md:block" />
|
|
<BreadcrumbItem class="hidden md:block">
|
|
<BreadcrumbLink href="#">
|
|
ui
|
|
</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
<BreadcrumbSeparator class="hidden md:block" />
|
|
<BreadcrumbItem>
|
|
<BreadcrumbPage>button.tsx</BreadcrumbPage>
|
|
</BreadcrumbItem>
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
</header>
|
|
<div class="flex flex-1 flex-col gap-4 p-4">
|
|
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
|
|
<div class="aspect-video rounded-xl bg-muted/50" />
|
|
<div class="aspect-video rounded-xl bg-muted/50" />
|
|
<div class="aspect-video rounded-xl bg-muted/50" />
|
|
</div>
|
|
<div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
|
|
</div>
|
|
</SidebarInset>
|
|
</SidebarProvider>
|
|
</template>
|