design system token v0.1

components/ui/page-layout.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+interface PageLayoutProps extends React.ComponentProps<'div'> {
+  navbar?: React.ReactNode
+  sidebar?: React.ReactNode
+  footer?: React.ReactNode
+}
+
+function PageLayout({
+  className,
+  navbar,
+  sidebar,
+  footer,
+  children,
+  ...props
+}: PageLayoutProps) {
+  return (
+    <div
+      data-slot="page-layout"
+      className={cn('min-h-screen flex flex-col bg-background text-foreground', className)}
+      {...props}
+    >
+      {navbar}
+      <div
+        className={cn(
+          'flex flex-1',
+          navbar && 'pt-16', // offset for fixed navbar
+        )}
+      >
+        {sidebar && (
+          <aside
+            data-slot="page-layout-sidebar"
+            className="hidden lg:block w-64 border-r border-border bg-background flex-shrink-0"
+          >
+            {sidebar}
+          </aside>
+        )}
+        <main
+          data-slot="page-layout-main"
+          className="flex-1 min-w-0"
+        >
+          {children}
+        </main>
+      </div>
+      {footer}
+    </div>
+  )
+}
+
+export { PageLayout }