41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import type { ReactNode } from "react";
|
|
|
|
/** Identidad y metadatos flexibles con acciones independientes y accesibles. */
|
|
export function CompactListItem({
|
|
title,
|
|
metadata,
|
|
icon,
|
|
actions,
|
|
children,
|
|
entityId,
|
|
}: {
|
|
title: ReactNode;
|
|
metadata?: ReactNode;
|
|
icon?: ReactNode;
|
|
actions?: ReactNode;
|
|
children?: ReactNode;
|
|
entityId?: string;
|
|
}) {
|
|
return (
|
|
<li
|
|
className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 py-2 first:pt-0 last:pb-0"
|
|
data-entity-id={entityId}
|
|
data-slot="compact-list-item"
|
|
>
|
|
{icon && (
|
|
<span aria-hidden="true" className="shrink-0 text-muted-foreground [&_svg]:size-5">
|
|
{icon}
|
|
</span>
|
|
)}
|
|
<div className="min-w-0 flex-1 basis-36">
|
|
<div className="font-medium [overflow-wrap:anywhere]">{title}</div>
|
|
{metadata && (
|
|
<div className="text-xs text-muted-foreground [overflow-wrap:anywhere]">{metadata}</div>
|
|
)}
|
|
{children}
|
|
</div>
|
|
{actions && <div className="flex min-w-0 flex-wrap items-center gap-2">{actions}</div>}
|
|
</li>
|
|
);
|
|
}
|