Liquid Glass for the web: the rim refraction, light and motion of iOS 27 glass on any rounded element. React bindings and pill tabs. MIT.
| /** Inline `code` in the reference's prose. */ |
| 6 | export function Prose({ text }: { text: string }) { |
| 7 | const parts = text.split(/(`[^`]+`)/g); |
| 8 | return ( |
| 9 | <> |
| 10 | {parts.map((part, index) => |
| 11 | part.startsWith("`") && part.endsWith("`") ? ( |
| 12 | <code key={index} className="rounded bg-muted px-1 py-0.5 font-mono text-[0.85em]"> |
| 13 | {part.slice(1, -1)} |
| 14 | </code> |
| 15 | ) : ( |
| 16 | part |
| 17 | ), |
| 18 | )} |
| 19 | </> |
| 20 | ); |
| 21 | } |
| 22 |
| 23 | export function Rules() { |
| 24 | return ( |
| 25 | <ol className="grid gap-3 sm:grid-cols-2"> |
| 26 | {RULES.map((rule, index) => ( |
| 27 | <li key={rule} className="flex gap-3 rounded-xl border border-border bg-card p-4 text-sm text-card-foreground"> |
| 28 | <span className="grid size-6 shrink-0 place-items-center rounded-full bg-muted text-xs font-semibold tabular-nums">{index + 1}</span> |
| 29 | <span className="leading-relaxed"> |
| 30 | <Prose text={rule} /> |
| 31 | </span> |
| 32 | </li> |
| 33 | ))} |
| 34 | </ol> |
| 35 | ); |
| 36 | } |
| 37 |
| 38 | export function Reference() { |
| 39 | return ( |
| 40 | <div className="grid gap-12"> |
| 41 | <nav aria-label="Reference sections" className="flex flex-wrap gap-2"> |
| 42 | {GROUPS.map((group) => ( |
| 43 | <Button key={group.id} asChild variant="outline" size="sm"> |
| 44 | <a href={`#api-${group.id}`}>{group.title}</a> |
| 45 | </Button> |
| 46 | ))} |
| 47 | </nav> |
| 48 | {GROUPS.map((group) => ( |
| 49 | <section key={group.id} id={`api-${group.id}`} className="grid scroll-mt-24 gap-4"> |
| 50 | <div className="grid gap-1.5"> |
| 51 | <h3 className="text-xl font-semibold tracking-tight">{group.title}</h3> |
| 52 | <p className="max-w-3xl text-sm leading-relaxed text-muted-foreground"> |
| 53 | <Prose text={group.intro} /> |
| 54 | </p> |
| 55 | </div> |
| 56 | <div className="overflow-x-auto rounded-xl border border-border"> |
| 57 | <Table> |
| 58 | <TableHeader> |
| 59 | <TableRow> |
| 60 | <TableHead className="w-[180px]">Name</TableHead> |
| 61 | <TableHead className="w-[220px]">Type</TableHead> |
| 62 | <TableHead>Description</TableHead> |
| 63 | </TableRow> |
| 64 | </TableHeader> |
| 65 | <TableBody> |
| 66 | {group.entries.map((entry) => ( |
| 67 | <TableRow key={entry.name} id={`api-${group.id}-${slug(entry.name)}`}> |
| 68 | <TableCell className="align-top"> |
| 69 | <a |
| 70 | href={`/${entryPath(group.id, entry.name)}`} |
| 71 | className="font-mono text-[13px] font-medium hover:underline" |
| 72 | title="Plain-text page for agents" |
| 73 | > |
| 74 | {entry.name} |
| 75 | </a> |
| 76 | </TableCell> |
| 77 | <TableCell className="align-top"> |
| 78 | <code className="font-mono text-xs break-words whitespace-normal text-muted-foreground">{entry.type}</code> |
| 79 | {entry.default ? ( |
| 80 | <div className="mt-1.5"> |
| 81 | <Badge variant="secondary">default {entry.default}</Badge> |
| 82 | </div> |
| 83 | ) : null} |
| 84 | </TableCell> |
| 85 | <TableCell className="min-w-[320px] align-top whitespace-normal"> |
| 86 | <Prose text={entry.description} /> |
| 87 | {entry.example ? ( |
| 88 | <pre className="mt-2 overflow-x-auto rounded-lg bg-muted px-3 py-2 text-xs"> |
| 89 | <code className="font-mono">{entry.example}</code> |
| 90 | </pre> |
| 91 | ) : null} |
| 92 | </TableCell> |
| 93 | </TableRow> |
| 94 | ))} |
| 95 | </TableBody> |
| 96 | </Table> |
| 97 | </div> |
| 98 | </section> |
| 99 | ))} |
| 100 | </div> |
| 101 | ); |
| 102 | } |
| 103 |