App layout

"use client"

import * as React from "react"
import { Inbox, MessagesSquare, PanelRight, Settings } from "lucide-react"
import { AppLayout } from "@/components/app-layout"
import { AppSidebar } from "@/components/app-sidebar"
import { EnvironmentBand } from "@/components/environment-band"
import type { Environment } from "@/lib/team"

const staging: Environment = { id: "staging", name: "Storefront", detail: "staging", production: false, hue: 2, connection: "connected" }

export default function Example() {
  const [place, setPlace] = React.useState("threads")
  const [panelOpen, setPanelOpen] = React.useState(false)
  const [fixed, setFixed] = React.useState(false)
  return (
    <div className="h-[420px] overflow-hidden rounded-lg border">
      <AppLayout
        // Sized for this preview box; in a full-screen app the defaults (768 and 1100) suit.
        sidebarAt={560}
        panelAt={640}
        minPanel={200}
        defaultPanel={220}
        maxPanel={320}
        // resizable={false} keeps the panel at defaultPanel's width, with no drag handle.
        resizable={!fixed}
        sidebar={
          <AppSidebar
            brand={<span className="px-1 text-sm font-semibold">Keel</span>}
            nav={[
              { id: "threads", label: "Threads", Icon: MessagesSquare },
              { id: "inbox", label: "Inbox", Icon: Inbox, count: 2, urgent: true },
              { id: "settings", label: "Settings", Icon: Settings },
            ]}
            activeNav={place}
            onNavigate={setPlace}
            user={{ name: "Sam", email: "sam@acme.example" }}
          />
        }
        top={<EnvironmentBand account="Acme" environment={staging} />}
        panel={
          <div className="flex flex-col gap-2 p-4 text-sm">
            <p className="font-medium">0042_add_region</p>
            <p className="text-muted-foreground">Adds a nullable region column to orders. Ran on Staging in 1.8s.</p>
          </div>
        }
        panelOpen={panelOpen}
        onPanelOpenChange={setPanelOpen}
        panelLabel="Migration"
      >
        <header className="flex h-11 shrink-0 items-center gap-2 border-b px-4">
          <h2 className="min-w-0 flex-1 truncate text-sm font-semibold">Add a region column to orders</h2>
          <label className="flex items-center gap-1.5 text-xs text-muted-foreground">
            <input type="checkbox" checked={fixed} onChange={(e) => setFixed(e.target.checked)} />
            Fixed width
          </label>
          <button
            type="button"
            aria-label="Migration panel"
            aria-pressed={panelOpen}
            onClick={() => setPanelOpen((o) => !o)}
            className="flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
          >
            <PanelRight className="size-4" />
          </button>
        </header>
        <div className="flex-1 overflow-y-auto p-4 text-sm text-muted-foreground">
          The migration is ready on Staging. Open the panel to see what it changes.
        </div>
      </AppLayout>
    </div>
  )
}