fixed gallery

resources/js/components/artwork/ArtworkStats.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+
+function formatCount(value) {
+  const number = Number(value || 0)
+  if (number >= 1_000_000) return `${(number / 1_000_000).toFixed(1).replace(/\.0$/, '')}M`
+  if (number >= 1_000) return `${(number / 1_000).toFixed(1).replace(/\.0$/, '')}k`
+  return `${number}`
+}
+
+export default function ArtworkStats({ artwork }) {
+  const stats = artwork?.stats || {}
+  const width = artwork?.dimensions?.width || 0
+  const height = artwork?.dimensions?.height || 0
+
+  return (
+    <section className="rounded-xl border border-nova-700 bg-panel p-5 shadow-lg shadow-deep/30">
+      <h2 className="text-xs font-semibold uppercase tracking-wide text-soft">Statistics</h2>
+      <dl className="mt-4 grid grid-cols-1 gap-3 text-sm sm:grid-cols-2">
+        <div className="rounded-lg bg-nova-900/30 px-3 py-2">
+          <dt className="text-soft">👁 Views</dt>
+          <dd className="mt-1 font-medium text-white">{formatCount(stats.views)} views</dd>
+        </div>
+        <div className="rounded-lg bg-nova-900/30 px-3 py-2">
+          <dt className="text-soft">⬇️ Downloads</dt>
+          <dd className="mt-1 font-medium text-white">{formatCount(stats.downloads)} downloads</dd>
+        </div>
+        <div className="hidden rounded-lg bg-nova-900/30 px-3 py-2 sm:block">
+          <dt className="text-soft">❤️ Likes</dt>
+          <dd className="mt-1 font-medium text-white">{formatCount(stats.likes)} likes</dd>
+        </div>
+        <div className="hidden rounded-lg bg-nova-900/30 px-3 py-2 sm:block">
+          <dt className="text-soft">⭐ Favorites</dt>
+          <dd className="mt-1 font-medium text-white">{formatCount(stats.favorites)} favorites</dd>
+        </div>
+        <div className="hidden rounded-lg bg-nova-900/30 px-3 py-2 sm:col-span-2 sm:block">
+          <dt className="text-soft">Resolution</dt>
+          <dd className="mt-1 font-medium text-white">{width > 0 && height > 0 ? `${width} × ${height}` : '—'}</dd>
+        </div>
+      </dl>
+    </section>
+  )
+}