70 lines
2.3 KiB
JavaScript
70 lines
2.3 KiB
JavaScript
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
|