40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import type { ReactNode } from "react";
|
|
|
|
export type DetailRow = {
|
|
label: string;
|
|
value?: string | ReactNode;
|
|
};
|
|
|
|
function MultilineValue({ value }: { value: string }) {
|
|
const lines = value.split(" | ");
|
|
if (lines.length === 1) return <>{value}</>;
|
|
return (
|
|
<span className="flex flex-col gap-2">
|
|
{lines.map((line, i) => (
|
|
<span key={i}>{line}</span>
|
|
))}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export function DetailTable({ rows }: { rows: DetailRow[] }) {
|
|
const filtered = rows.filter((row) => row.value);
|
|
if (filtered.length === 0) return null;
|
|
|
|
return (
|
|
<table className="w-full text-left text-sm">
|
|
<tbody className="divide-y-1 divide-lighttext/10 dark:divide-darktext/10">
|
|
{filtered.map((row, i) => (
|
|
<tr key={i}>
|
|
<td className="w-45 py-4 pr-4 align-middle break-words text-lightsec dark:text-darksec">
|
|
{row.label}
|
|
</td>
|
|
<td className="py-4 align-middle break-words text-lighttext dark:text-darktext">
|
|
{typeof row.value === "string" ? <MultilineValue value={row.value} /> : row.value}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
);
|
|
}
|