60:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 61:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 62:T113c,// title: Sortable API Endpoints "use client"; import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react"; import { useState } from "react"; import { Badge } from "@/registry/default/ui/badge"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/registry/default/ui/table"; type SortKey = "endpoint" | "latency" | "requests" | "errorRate"; type SortDir = "asc" | "desc"; const methodVariant: Record< string, "success" | "info" | "warning" | "destructive" > = { DELETE: "destructive", GET: "success", PATCH: "warning", POST: "info", PUT: "warning", }; const rows = [ { endpoint: "/api/users", errorRate: 0.2, latency: 48, method: "GET", requests: 12400, }, { endpoint: "/api/orders", errorRate: 1.4, latency: 134, method: "POST", requests: 3200, }, { endpoint: "/api/products", errorRate: 0.0, latency: 22, method: "GET", requests: 28900, }, { endpoint: "/api/auth/login", errorRate: 3.8, latency: 210, method: "POST", requests: 8700, }, { endpoint: "/api/users/:id", errorRate: 0.5, latency: 61, method: "PATCH", requests: 1100, }, { endpoint: "/api/orders/:id", errorRate: 0.0, latency: 38, method: "DELETE", requests: 540, }, ]; function SortIcon({ col, sortKey, sortDir, }: { col: SortKey; sortKey: SortKey; sortDir: SortDir; }) { if (col !== sortKey) return ; return sortDir === "asc" ? ( ) : ( ); } export function Pattern() { const [sortKey, setSortKey] = useState("requests"); const [sortDir, setSortDir] = useState("desc"); const sorted = [...rows].sort((a, b) => { const val = sortDir === "asc" ? 1 : -1; if (typeof a[sortKey] === "string") { return val * (a[sortKey] as string).localeCompare(b[sortKey] as string); } return val * ((a[sortKey] as number) - (b[sortKey] as number)); }); const toggleSort = (key: SortKey) => { if (sortKey === key) setSortDir((d) => (d === "asc" ? "desc" : "asc")); else { setSortKey(key); setSortDir("desc"); } }; const th = (key: SortKey, label: string, align = "left") => ( toggleSort(key)} > {label} ); return (

Method {th("endpoint", "Endpoint")} {th("latency", "Avg latency", "right")} {th("requests", "Req / day", "right")} {th("errorRate", "Error %", "right")} {sorted.map((row) => ( {row.method} {row.endpoint} {row.latency} ms {row.requests.toLocaleString()} = 3 ? "text-destructive" : row.errorRate >= 1 ? "text-warning" : "text-success-foreground" }`} > {row.errorRate.toFixed(1)}% ))}

); } 5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L60",null,{"namespace":"@registrydirectory","registryDependencies":["@cnippet/table"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"registry/default/variants/v-table-8.tsx","content":"$62","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]