fixed gallery

resources/js/components/artwork/ArtworkMeta.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+export default function ArtworkMeta({ artwork }) {
+  const author = artwork?.user?.name || artwork?.user?.username || 'Artist'
+  const publishedAt = artwork?.published_at
+    ? new Date(artwork.published_at).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+    : '—'
+  const width = artwork?.dimensions?.width || 0
+  const height = artwork?.dimensions?.height || 0
+
+  return (
+    <div className="rounded-xl border border-nova-700 bg-panel p-5">
+      <h1 className="text-xl font-semibold text-white sm:text-2xl">{artwork?.title}</h1>
+      <dl className="mt-4 grid grid-cols-1 gap-3 text-sm text-soft sm:grid-cols-2">
+        <div className="flex items-center justify-between gap-4 rounded-lg bg-nova-900/30 px-3 py-2">
+          <dt>Author</dt>
+          <dd className="text-white">{author}</dd>
+        </div>
+        <div className="flex items-center justify-between gap-4 rounded-lg bg-nova-900/30 px-3 py-2">
+          <dt>Upload date</dt>
+          <dd className="text-white">{publishedAt}</dd>
+        </div>
+        <div className="flex items-center justify-between gap-4 rounded-lg bg-nova-900/30 px-3 py-2 sm:col-span-2">
+          <dt>Resolution</dt>
+          <dd className="text-white">{width > 0 && height > 0 ? `${width} × ${height}` : '—'}</dd>
+        </div>
+      </dl>
+    </div>
+  )
+}