spb/satelliteindex

1import { Search } from 'lucide-react';2import { cn } from '@/lib/cn';34/** Plain GET form — works without JavaScript; the ⌘K dialog is the enhanced path. */5export function SearchForm({ q, className, autoFocus = false }: { q: string; className?: string; autoFocus?: boolean }) {6  return (7    <form action="/search" method="get" role="search" className={cn('flex gap-2', className)}>8      <label className="flex h-12 min-w-0 flex-1 items-center gap-2 rounded-md border border-rule bg-plane-2/70 px-3 focus-within:border-rule-strong">9        <Search className="size-4 shrink-0 text-ink-3" aria-hidden />10        <span className="sr-only">Search query</span>11        <input12          type="search"13          name="q"14          defaultValue={q}15          placeholder="Satellite, NORAD, COSPAR, operator, constellation, country…"16          className="min-w-0 flex-1 bg-transparent text-[16px] text-ink placeholder:text-ink-3 focus:outline-none"17          autoComplete="off"18          spellCheck={false}19          autoFocus={autoFocus}20          maxLength={120}21        />22      </label>23      <button type="submit" className="h-12 shrink-0 rounded-md bg-accent px-4 text-sm font-semibold text-accent-ink hover:brightness-110">24        Search25      </button>26    </form>27  );28}29