Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 2458x 2458x 97x | import { getImageUrl } from "../../lib/api";
type FieldType = "text" | "url" | "image";
interface ReadOnlyFieldProps {
label: string;
value?: string | string[] | null;
type?: FieldType;
className?: string;
}
export function ReadOnlyField({ label, value, type = "text", className }: ReadOnlyFieldProps) {
const isEmpty = !value || (Array.isArray(value) && value.length === 0);
return (
<div className={className}>
<dt className="text-xs font-medium text-foreground-subtle uppercase tracking-wide">
{label}
</dt>
<dd className="mt-1">
{isEmpty ? (
<span className="text-foreground-subtle">—</span>
) : Array.isArray(value) ? (
<div className="flex flex-wrap gap-1.5">
{value.map((item) => (
<span
key={item}
className="inline-flex items-center px-2.5 py-0.5 text-xs font-medium rounded-full bg-primary-50 text-primary-700 border border-primary-200"
>
{item}
</span>
))}
</div>
) : type === "url" ? (
<a
href={value}
target="_blank"
rel="noopener noreferrer"
className="text-sm text-primary-600 hover:text-primary-700 underline truncate block"
>
{value.replace(/^https?:\/\//, "")}
</a>
) : type === "image" ? (
<img
src={getImageUrl(value)}
alt={label}
className="h-16 w-16 rounded-lg object-contain border border-border-default"
loading="lazy"
/>
) : (
<span className="text-sm text-foreground-default break-words">{value}</span>
)}
</dd>
</div>
);
}
|