| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 |
- "use client"
- import { useSession } from "next-auth/react"
- import { AppSidebar } from "@/components/app-sidebar"
- import { SidebarInset, SidebarTrigger, SidebarProvider } from "@/components/ui/sidebar"
- import { Separator } from "@/components/ui/separator"
- import {
- Breadcrumb,
- BreadcrumbItem,
- BreadcrumbLink,
- BreadcrumbList,
- BreadcrumbPage,
- BreadcrumbSeparator,
- } from "@/components/ui/breadcrumb"
- import { redirect } from "next/navigation"
- interface DashboardLayoutProps {
- children: React.ReactNode
- breadcrumbs?: {
- label: string
- href?: string
- }[]
- }
- export function DashboardLayout({ children, breadcrumbs = [] }: DashboardLayoutProps) {
- const { data: session, status } = useSession()
- if (status === "loading") {
- return (
- <div className="flex h-screen items-center justify-center">
- <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900"></div>
- </div>
- )
- }
- if (!session?.user) {
- redirect("/")
- }
- return (
- <SidebarProvider>
- <AppSidebar />
- <SidebarInset>
- <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
- <div className="flex items-center gap-2 px-4">
- <SidebarTrigger className="-ml-1" />
- <Separator orientation="vertical" className="mr-2 h-4" />
- {breadcrumbs.length > 0 && (
- <Breadcrumb>
- <BreadcrumbList>
- {breadcrumbs.map((breadcrumb, index) => (
- <div key={index} className="flex items-center gap-2">
- <BreadcrumbItem className="hidden md:block">
- {breadcrumb.href ? (
- <BreadcrumbLink href={breadcrumb.href}>
- {breadcrumb.label}
- </BreadcrumbLink>
- ) : (
- <BreadcrumbPage>{breadcrumb.label}</BreadcrumbPage>
- )}
- </BreadcrumbItem>
- {index < breadcrumbs.length - 1 && (
- <BreadcrumbSeparator className="hidden md:block" />
- )}
- </div>
- ))}
- </BreadcrumbList>
- </Breadcrumb>
- )}
- </div>
- </header>
- <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
- {children}
- </div>
- </SidebarInset>
- </SidebarProvider>
- )
- }
|