Search input

"use client"

import * as React from "react"
import { SearchInput, SearchTrigger } from "@/components/candor/ui/search-input"

const runs = ["Deploy api to staging", "Deploy web to production", "Backfill orders", "Rotate signing keys", "Rebuild search index"]

export default function Example() {
  const [query, setQuery] = React.useState("")
  const [busy, setBusy] = React.useState(false)
  const [results, setResults] = React.useState<number | null>(null)
  const [opened, setOpened] = React.useState(0)
  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
  const shown = runs.filter((r) => r.toLowerCase().includes(query.toLowerCase()))

  return (
    <div className="flex max-w-sm flex-col gap-3 rounded-xl border bg-card p-4">
      <SearchInput
        label="Search runs"
        placeholder="Name or id"
        shortcut="/"
        busy={busy}
        results={results}
        onSearch={(q) => {
          clearTimeout(timer.current)
          if (!q) {
            setQuery("")
            setResults(null)
            return
          }
          // A stand-in for a server search that takes a moment.
          setBusy(true)
          timer.current = setTimeout(() => {
            setQuery(q)
            setResults(runs.filter((r) => r.toLowerCase().includes(q.toLowerCase())).length)
            setBusy(false)
          }, 400)
        }}
      />
      <ul className="flex flex-col gap-1 text-sm">
        {shown.map((r) => (
          <li key={r}>{r}</li>
        ))}
      </ul>
      <SearchTrigger onOpen={() => setOpened((n) => n + 1)} shortcut="mod+k" />
      <p className="text-xs text-muted-foreground">Search opened {opened} times.</p>
    </div>
  )
}