layout.tsx 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. import type { Metadata } from "next";
  2. import { Geist, Geist_Mono } from "next/font/google";
  3. import "./globals.css";
  4. import { ThemeProvider } from "@/components/theme-provider";
  5. import { Toaster } from "@/components/ui/sonner";
  6. import { SidebarProvider, SidebarInset, SidebarTrigger } from "@/components/ui/sidebar";
  7. import { AppSidebar } from "@/components/app-sidebar";
  8. import { Separator } from "@/components/ui/separator";
  9. const geistSans = Geist({
  10. variable: "--font-geist-sans",
  11. subsets: ["latin"],
  12. });
  13. const geistMono = Geist_Mono({
  14. variable: "--font-geist-mono",
  15. subsets: ["latin"],
  16. });
  17. export const metadata: Metadata = {
  18. title: "Sumire - shadcn/ui Demo",
  19. description: "yoshizawa se merecía mejor",
  20. };
  21. export default function RootLayout({
  22. children,
  23. }: Readonly<{
  24. children: React.ReactNode;
  25. }>) {
  26. return (
  27. <html lang="es" suppressHydrationWarning>
  28. <body
  29. className={`${geistSans.variable} ${geistMono.variable} antialiased`}
  30. >
  31. <ThemeProvider
  32. attribute="class"
  33. defaultTheme="system"
  34. enableSystem
  35. disableTransitionOnChange
  36. >
  37. <SidebarProvider>
  38. <AppSidebar />
  39. <SidebarInset>
  40. <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">
  41. <div className="flex items-center gap-2 px-4">
  42. <SidebarTrigger className="-ml-1" />
  43. <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
  44. </div>
  45. </header>
  46. <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
  47. {children}
  48. </div>
  49. </SidebarInset>
  50. </SidebarProvider>
  51. <Toaster />
  52. </ThemeProvider>
  53. </body>
  54. </html>
  55. );
  56. }