page.tsx — ui Source File

Source Code

"use client"

import * as React from "react"
import { Command, Sidebar } from "lucide-react"

import { AppSidebar } from "@/registry/default/block/sidebar-16/components/app-sidebar"
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/registry/default/ui/breadcrumb"
import { Button } from "@/registry/default/ui/button"
import { Separator } from "@/registry/default/ui/separator"
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from "@/registry/default/ui/sidebar"

export const iframeHeight = "800px"

export const description = "An inset sidebar with site header navigation."

const HEADER_HEIGHT = "4rem"

export default function Page() {
  const [open, setOpen] = React.useState(true)

  return (
    <div
      style={
        {
          "--header-height": HEADER_HEIGHT,
        } as React.CSSProperties
      }
    >
      <header className="bg-sidebar sticky h-[--header-height] top-0 z-50 w-full border-b border-border/40  backdrop-blur">
        <div className="flex h-14 items-center px-4">
          <div className="mr-4 hidden md:flex">
            <Button
              className="hidden md:flex"
              variant="ghost"
              size="icon"
              onClick={() => setOpen(!open)}
            >
              <Sidebar />
            </Button>
            <a href="#" className="mr-4 flex items-center gap-2 lg:mr-6">
              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                <Command className="size-4" />
              </div>
            </a>
            <nav className="flex items-center gap-4 text-sm xl:gap-6">
              <a
                href="#"
                className="transition-colors hover:text-foreground/80"
              >
// ... (75 more lines)