52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
import type { LocalizedFeatureProperty } from "../utils/feature-properties";
|
|
|
|
type FeaturePropertyListProps = {
|
|
entries: LocalizedFeatureProperty[];
|
|
variant?: "insight" | "popover";
|
|
};
|
|
|
|
export function FeaturePropertyList({
|
|
entries,
|
|
variant = "insight"
|
|
}: FeaturePropertyListProps) {
|
|
if (entries.length === 0) {
|
|
return <p className="py-3 text-center text-sm text-slate-500">暂无可展示属性</p>;
|
|
}
|
|
|
|
return (
|
|
<dl className={cn(
|
|
"surface-reading divide-y divide-slate-100 border",
|
|
variant === "popover" ? "rounded-xl px-3" : "rounded"
|
|
)}>
|
|
{entries.map((entry) => (
|
|
<div
|
|
key={entry.key}
|
|
className={cn(
|
|
"grid",
|
|
variant === "popover"
|
|
? "min-h-10 grid-cols-[96px_minmax(0,1fr)] items-baseline gap-3 py-2.5"
|
|
: "grid-cols-[110px_minmax(0,1fr)] gap-2 px-3 py-2 text-sm"
|
|
)}
|
|
>
|
|
<dt className={cn(
|
|
"text-slate-500",
|
|
variant === "popover" ? "text-xs font-medium leading-5" : "truncate"
|
|
)}>
|
|
{entry.label}
|
|
</dt>
|
|
<dd className={cn(
|
|
"font-medium text-slate-800",
|
|
variant === "popover"
|
|
? "break-words text-right text-sm font-semibold leading-5 tabular-nums"
|
|
: "truncate",
|
|
entry.value === "暂无" && "font-medium text-slate-400"
|
|
)}>
|
|
{entry.value}
|
|
</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
);
|
|
}
|