Basic layout finished

src/components/images/ImageMetadataBox.tsx

@@ -0,0 +1,57 @@
+// components/images/ImageMetadataBox.tsx
+"use client"
+
+import { Album, Category, Tag } from "@/generated/prisma"
+import { FolderIcon, LayersIcon, TagIcon } from "lucide-react"
+import Link from "next/link"
+
+type Props = {
+  album: Album | null
+  categories: Category[]
+  tags: Tag[]
+}
+
+export default function ImageMetadataBox({ album, categories, tags }: Props) {
+  return (
+    <div className="border rounded-lg p-4 shadow bg-muted/20 w-full max-w-xl space-y-3">
+      {album && (
+        <div className="flex items-center gap-2">
+          <FolderIcon className="w-5 h-5 text-muted-foreground" />
+          <Link href={`/galleries/${album.galleryId}/${album.slug}`} className="hover:underline">
+            {album.name}
+          </Link>
+        </div>
+      )}
+
+      {categories.length > 0 && (
+        <div className="flex items-center gap-2 flex-wrap">
+          <LayersIcon className="w-5 h-5 text-muted-foreground" />
+          {categories.map((cat) => (
+            <Link
+              key={cat.id}
+              href={`/categories/${cat.id}`}
+              className="text-sm text-muted-foreground hover:underline"
+            >
+              {cat.name}
+            </Link>
+          ))}
+        </div>
+      )}
+
+      {tags.length > 0 && (
+        <div className="flex items-center gap-2 flex-wrap">
+          <TagIcon className="w-5 h-5 text-muted-foreground" />
+          {tags.map((tag) => (
+            <Link
+              key={tag.id}
+              href={`/tags/${tag.id}`}
+              className="text-sm text-muted-foreground hover:underline"
+            >
+              {tag.name}
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}