dashboard-layout.tsx 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. "use client"
  2. import { useSession } from "next-auth/react"
  3. import { AppSidebar } from "@/components/app-sidebar"
  4. import { SidebarInset, SidebarTrigger, SidebarProvider } from "@/components/ui/sidebar"
  5. import { Separator } from "@/components/ui/separator"
  6. import {
  7. Breadcrumb,
  8. BreadcrumbItem,
  9. BreadcrumbLink,
  10. BreadcrumbList,
  11. BreadcrumbPage,
  12. BreadcrumbSeparator,
  13. } from "@/components/ui/breadcrumb"
  14. import { redirect } from "next/navigation"
  15. interface DashboardLayoutProps {
  16. children: React.ReactNode
  17. breadcrumbs?: {
  18. label: string
  19. href?: string
  20. }[]
  21. }
  22. export function DashboardLayout({ children, breadcrumbs = [] }: DashboardLayoutProps) {
  23. const { data: session, status } = useSession()
  24. if (status === "loading") {
  25. return (
  26. <div className="flex h-screen items-center justify-center">
  27. <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900"></div>
  28. </div>
  29. )
  30. }
  31. if (!session?.user) {
  32. redirect("/")
  33. }
  34. return (
  35. <SidebarProvider>
  36. <AppSidebar />
  37. <SidebarInset>
  38. <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">
  39. <div className="flex items-center gap-2 px-4">
  40. <SidebarTrigger className="-ml-1" />
  41. <Separator orientation="vertical" className="mr-2 h-4" />
  42. {breadcrumbs.length > 0 && (
  43. <Breadcrumb>
  44. <BreadcrumbList>
  45. {breadcrumbs.map((breadcrumb, index) => (
  46. <div key={index} className="flex items-center gap-2">
  47. <BreadcrumbItem className="hidden md:block">
  48. {breadcrumb.href ? (
  49. <BreadcrumbLink href={breadcrumb.href}>
  50. {breadcrumb.label}
  51. </BreadcrumbLink>
  52. ) : (
  53. <BreadcrumbPage>{breadcrumb.label}</BreadcrumbPage>
  54. )}
  55. </BreadcrumbItem>
  56. {index < breadcrumbs.length - 1 && (
  57. <BreadcrumbSeparator className="hidden md:block" />
  58. )}
  59. </div>
  60. ))}
  61. </BreadcrumbList>
  62. </Breadcrumb>
  63. )}
  64. </div>
  65. </header>
  66. <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
  67. {children}
  68. </div>
  69. </SidebarInset>
  70. </SidebarProvider>
  71. )
  72. }