| import React from "react"; | |
| interface KeyValueRow { | |
| /** Already-translated label. */ | |
| label: string; | |
| value: React.ReactNode; | |
| } | |
| /** | |
| * Two-column label / value grid for compact parameter displays. | |
| */ | |
| export function KeyValueGrid({ rows }: { rows: KeyValueRow[] }) { | |
| return ( | |
| <div className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs"> | |
| {rows.map(({ label, value }) => ( | |
| <React.Fragment key={label}> | |
| <span className="text-muted">{label}</span> | |
| <span className="break-all font-mono text-foreground">{value}</span> | |
| </React.Fragment> | |
| ))} | |
| </div> | |
| ); | |
| } | |