14 lines
787 B
TypeScript
14 lines
787 B
TypeScript
import type { ReactNode } from "react";
|
|
|
|
/** Etiqueta y valor responden al ancho de su ficha, no al ancho total del navegador. */
|
|
export function DetailField({ label, children }: { label: ReactNode; children: ReactNode }) {
|
|
return (
|
|
<div className="grid min-w-0 gap-1 border-b border-border/60 py-2.5 first:pt-0 last:border-0 last:pb-0 @min-[240px]:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)] @min-[240px]:gap-3">
|
|
<dt className="text-xs leading-5 text-muted-foreground">{label}</dt>
|
|
<dd className="min-w-0 whitespace-pre-wrap break-words text-sm font-medium leading-5 [&_a]:cursor-pointer [&_a]:text-primary [&_a]:underline-offset-4 [&_a:hover]:underline [&_a:focus-visible]:outline-2 [&_a:focus-visible]:outline-ring">
|
|
{children}
|
|
</dd>
|
|
</div>
|
|
);
|
|
}
|