33 lines
716 B
TypeScript
33 lines
716 B
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { cn } from "@/shared/utils/utils";
|
||
|
|
import DOMPurify from "dompurify";
|
||
|
|
|
||
|
|
interface DetailItemProps {
|
||
|
|
label: string;
|
||
|
|
value: React.ReactNode;
|
||
|
|
className?: string;
|
||
|
|
renderAsHtml?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function DetailItem({
|
||
|
|
label,
|
||
|
|
value,
|
||
|
|
className,
|
||
|
|
renderAsHtml = false,
|
||
|
|
}: DetailItemProps) {
|
||
|
|
const content =
|
||
|
|
renderAsHtml && typeof value === "string" ? (
|
||
|
|
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(value) }} />
|
||
|
|
) : (
|
||
|
|
value
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={cn("px-4 py-2", className)}>
|
||
|
|
<div className="text-sm font-medium text-zinc-950">{label}</div>
|
||
|
|
<div className="text-sm text-zinc-800">{content}</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|