Refactor galleries and single page

2025-12-30 19:37:33 +01:00
parent 8143f90bfc
commit 21faef78ee
9 changed files with 301 additions and 152 deletions
--- a/src/components/artworks/ArtworkMetaCard.tsx
+++ b/src/components/artworks/ArtworkMetaCard.tsx
@ -0,0 +1,72 @@
+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>
+  );
+}