fixed gallery

resources/js/Pages/ArtworkPage.jsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import ArtworkHero from '../components/artwork/ArtworkHero'
+import ArtworkMeta from '../components/artwork/ArtworkMeta'
+import ArtworkActions from '../components/artwork/ArtworkActions'
+import ArtworkStats from '../components/artwork/ArtworkStats'
+import ArtworkTags from '../components/artwork/ArtworkTags'
+import ArtworkAuthor from '../components/artwork/ArtworkAuthor'
+import ArtworkRelated from '../components/artwork/ArtworkRelated'
+import ArtworkDescription from '../components/artwork/ArtworkDescription'
+
+function ArtworkPage({ artwork, related, presentMd, presentLg, presentXl, presentSq, canonicalUrl }) {
+  if (!artwork) return null
+
+  return (
+    <main className="mx-auto w-full max-w-screen-xl px-4 pb-24 pt-10 sm:px-6 lg:px-8 lg:pb-12">
+      <ArtworkHero artwork={artwork} presentMd={presentMd} presentLg={presentLg} presentXl={presentXl} />
+
+      <div className="mt-6 lg:hidden">
+        <ArtworkActions artwork={artwork} canonicalUrl={canonicalUrl} mobilePriority />
+      </div>
+
+      <div className="mt-8 grid grid-cols-1 gap-8 lg:grid-cols-3">
+        <div className="space-y-6 lg:col-span-2">
+          <ArtworkMeta artwork={artwork} />
+          <ArtworkAuthor artwork={artwork} presentSq={presentSq} />
+          <ArtworkStats artwork={artwork} />
+          <ArtworkTags artwork={artwork} />
+          <ArtworkDescription artwork={artwork} />
+        </div>
+
+        <aside className="hidden space-y-6 lg:block">
+          <div className="sticky top-24">
+            <ArtworkActions artwork={artwork} canonicalUrl={canonicalUrl} />
+          </div>
+        </aside>
+      </div>
+
+      <ArtworkRelated related={related} />
+    </main>
+  )
+}
+
+// Auto-mount if the Blade view provided data attributes
+const el = document.getElementById('artwork-page')
+if (el) {
+  const parse = (key, fallback = null) => {
+    try {
+      return JSON.parse(el.dataset[key] || 'null') ?? fallback
+    } catch {
+      return fallback
+    }
+  }
+
+  const root = createRoot(el)
+  root.render(
+    <ArtworkPage
+      artwork={parse('artwork')}
+      related={parse('related', [])}
+      presentMd={parse('presentMd')}
+      presentLg={parse('presentLg')}
+      presentXl={parse('presentXl')}
+      presentSq={parse('presentSq')}
+      canonicalUrl={parse('canonical', '')}
+    />,
+  )
+}
+
+export default ArtworkPage