73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
import { LayersIcon, QuoteIcon, TagIcon } from "lucide-react";
|
|
|
|
export default function ArtworkMetaCard({
|
|
gradientColors,
|
|
altText,
|
|
description,
|
|
categories,
|
|
tags,
|
|
}: {
|
|
gradientColors: string;
|
|
altText?: string | null;
|
|
description?: string | null;
|
|
categories: { id: string; name: string }[];
|
|
tags: { id: string; name: string }[];
|
|
}) {
|
|
const hasData =
|
|
Boolean(altText) ||
|
|
Boolean(description) ||
|
|
categories.length > 0 ||
|
|
tags.length > 0;
|
|
|
|
if (!hasData) return null;
|
|
|
|
return (
|
|
<div
|
|
className="w-full max-w-xl rounded-xl p-px"
|
|
style={{ background: `linear-gradient(135deg, ${gradientColors})` }}
|
|
>
|
|
<div className="rounded-[11px] border bg-background p-4 shadow-sm space-y-3">
|
|
{altText && (
|
|
<div className="flex items-start gap-2">
|
|
<TagIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-0.5" />
|
|
<span className="text-sm text-muted-foreground">{altText}</span>
|
|
</div>
|
|
)}
|
|
|
|
{description && (
|
|
<div className="flex items-start gap-2">
|
|
<QuoteIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-0.5" />
|
|
<span className="text-sm text-muted-foreground">{description}</span>
|
|
</div>
|
|
)}
|
|
|
|
{categories.length > 0 && (
|
|
<div className="flex items-start gap-2 flex-wrap">
|
|
<LayersIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-0.5" />
|
|
{categories.map((cat) => (
|
|
<div key={cat.id} className="text-sm underline">
|
|
{/* <Link key={cat.id} href={`/categories/${cat.id}`} className="text-sm underline"> */}
|
|
{cat.name}
|
|
{/* </Link> */}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{tags.length > 0 && (
|
|
<div className="flex items-start gap-2 flex-wrap">
|
|
<TagIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-0.5" />
|
|
{tags.map((tag) => (
|
|
<div key={tag.id} className="text-sm underline">
|
|
{/* <Link key={tag.id} href={`/tags/${tag.id}`} className="text-sm underline"> */}
|
|
{tag.name}
|
|
{/* </Link> */}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|