1import { Link, useSearchParams } from "react-router";2import type { SearchResult } from "../api";3import { useFetch } from "../hooks";4import { Badge, Empty, ErrorBox, Loading } from "../components/ui";5import { routeFor } from "../components/Graph";67export default function SearchPage() {8 const [sp] = useSearchParams(); const q = sp.get("q") ?? "";9 const { data, error, loading } = useFetch<{ query: string; results: SearchResult[] }>(q ? `search?q=${encodeURIComponent(q)}&limit=50` : null);10 const groups = new Map<string, SearchResult[]>();11 for (const r of data?.results ?? []) groups.set(r.type, [...(groups.get(r.type) ?? []), r]);12 return (13 <div>14 <h1>Search</h1><p className="hint">“{q}” — full-text and trigram search over APIs, endpoints, variables and packages.</p>15 {loading && <Loading />}<ErrorBox error={error} />16 {data && data.results.length === 0 && <Empty>No results. Register the API from <Link to="/apis">API Atlas → Discover</Link>.</Empty>}17 {Array.from(groups.entries()).map(([type, rs]) => (18 <div className="card" key={type}><h3>{type} ({rs.length})</h3>19 {rs.map((r) => (<div key={r.id} className="row between" style={{ padding: "6px 0", borderBottom: "1px solid var(--border)" }}>20 <span><Link to={routeFor(`${type}:${r.id}`) ?? `/apis/${r.api_id}`}>{r.title}</Link> <span className="hint">{r.provider}</span><div className="hint">{r.snippet?.slice(0, 140)}</div></span>21 <span className="row"><Badge v={r.lifecycle} /><Badge v={r.knowledge_state} /></span></div>))}22 </div>))}23 </div>24 );25}26