Dock window

"use client"

import * as React from "react"
import { DockWindow } from "@/components/candor/dock-window"
import { TooltipProvider } from "@/components/candor/ui/tooltip"

const lines = ["Building storefront@418", "Installing dependencies (1.2s)", "Compiling 214 modules", "Uploading to Staging", "Running smoke tests"]

export default function Example() {
  const [shown, setShown] = React.useState(2)
  const [deploying, setDeploying] = React.useState(false)
  return (
    <TooltipProvider>
      <div className="flex flex-col gap-3">
        <label className="flex items-center gap-1.5 text-xs text-muted-foreground">
          <input type="checkbox" checked={deploying} onChange={(e) => setDeploying(e.target.checked)} />
          A deploy is starting
        </label>
        <div className="h-56 rounded-lg border p-3">
          {/* The log is rendered once: floated and brought back, it keeps its lines and the note typed into it. */}
          <DockWindow title="Deploy log" locked={deploying ? "The log can't float while a deploy is starting." : undefined}>
            <div className="flex flex-col gap-2 p-1 text-xs">
              <ol className="flex flex-col gap-0.5 font-mono">
                {lines.slice(0, shown).map((line) => (
                  <li key={line}>{line}</li>
                ))}
              </ol>
              <button type="button" className="self-start text-primary underline-offset-2 hover:underline" onClick={() => setShown((n) => Math.min(lines.length, n + 1))}>
                Show the next line
              </button>
              <input aria-label="Note on this deploy" placeholder="Note on this deploy" className="h-8 rounded-md border bg-card px-2 text-sm" />
            </div>
          </DockWindow>
        </div>
        <p className="text-xs text-muted-foreground">Floating, drag the window by its title bar, or focus its handle and use the arrow keys (Shift moves further).</p>
      </div>
    </TooltipProvider>
  )
}