Code Snippets

export default function Layout({ children }) {
  return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-40 border-b bg-background">
        <div className="container flex h-16 items-center">
          <div className="mr-4 hidden md:flex">
            <a href="/" className="mr-6 flex items-center space-x-2">
              <span className="font-bold">Your Logo</span>
            </a>
            <nav className="flex items-center space-x-6 text-sm font-medium">
              <a href="/about" className="transition-colors hover:text-foreground/80">About</a>
              <a href="/products" className="transition-colors hover:text-foreground/80">Products</a>
              <a href="/contact" className="transition-colors hover:text-foreground/80">Contact</a>
            </nav>
          </div>
          <div className="flex flex-1 items-center justify-end">
            <button className="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background border border-input hover:bg-accent hover:text-accent-foreground h-10 py-2 px-4">
              Sign In
            </button>
          </div>
        </div>
      </header>
      <main className="flex-1">
        <div className="container py-8">
          {children}
        </div>
      </main>
      <footer className="border-t py-6 md:py-0">
        <div className="container flex flex-col items-center justify-between gap-4 md:h-16 md:flex-row">
          <p className="text-sm text-muted-foreground">
            &copy; {new Date().getFullYear()} Your Company. All rights reserved.
          </p>
          <div className="flex items-center gap-4">
            <a href="/terms" className="text-sm text-muted-foreground hover:text-foreground">
              Terms
            </a>
            <a href="/privacy" className="text-sm text-muted-foreground hover:text-foreground">
              Privacy
            </a>
          </div>
        </div>
      </footer>
    </div>
  )
}

export default function DashboardLayout({ children }) {
  return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-40 border-b bg-background">
        <div className="container flex h-16 items-center">
          <div className="mr-4">
            <a href="/" className="flex items-center space-x-2">
              <span className="font-bold">Dashboard</span>
            </a>
          </div>
          <div className="flex flex-1 items-center justify-end">
            <button className="inline-flex items-center justify-center rounded-full h-10 w-10 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background hover:bg-accent hover:text-accent-foreground">
              <span className="sr-only">User menu</span>
              <span className="rounded-full h-8 w-8 bg-muted flex items-center justify-center">
                U
              </span>
            </button>
          </div>
        </div>
      </header>
      <div className="flex flex-1">
        <aside className="w-64 border-r bg-background hidden md:block">
          <div className="flex flex-col gap-2 p-4">
            <a href="/dashboard" className="flex items-center gap-2 rounded-lg px-3 py-2 text-foreground transition-all hover:bg-accent">
              Dashboard
            </a>
            <a href="/dashboard/analytics" className="flex items-center gap-2 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:bg-accent hover:text-foreground">
              Analytics
            </a>
            <a href="/dashboard/customers" className="flex items-center gap-2 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:bg-accent hover:text-foreground">
              Customers
            </a>
            <a href="/dashboard/products" className="flex items-center gap-2 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:bg-accent hover:text-foreground">
              Products
            </a>
            <a href="/dashboard/settings" className="flex items-center gap-2 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:bg-accent hover:text-foreground">
              Settings
            </a>
          </div>
        </aside>
        <main className="flex-1">
          <div className="container py-8">
            {children}
          </div>
        </main>
      </div>
    </div>
  )
}