fixed gallery

2026-02-22 17:09:34 +01:00
parent 48e2055b6a
commit 5c97488e80
33 changed files with 2062 additions and 550 deletions
--- a/resources/js/components/artwork/ArtworkHero.jsx
+++ b/resources/js/components/artwork/ArtworkHero.jsx
@@ -0,0 +1,73 @@
+import React, { useState } from 'react'
+
+const FALLBACK_MD = 'https://files.skinbase.org/default/missing_md.webp'
+const FALLBACK_LG = 'https://files.skinbase.org/default/missing_lg.webp'
+const FALLBACK_XL = 'https://files.skinbase.org/default/missing_xl.webp'
+
+export default function ArtworkHero({ artwork, presentMd, presentLg, presentXl }) {
+  const [isLoaded, setIsLoaded] = useState(false)
+
+  const mdSource = presentMd?.url || artwork?.thumbs?.md?.url || null
+  const lgSource = presentLg?.url || artwork?.thumbs?.lg?.url || null
+  const xlSource = presentXl?.url || artwork?.thumbs?.xl?.url || null
+
+  const md = mdSource || FALLBACK_MD
+  const lg = lgSource || FALLBACK_LG
+  const xl = xlSource || FALLBACK_XL
+
+  const hasRealArtworkImage = Boolean(mdSource || lgSource || xlSource)
+  const blurBackdropSrc = mdSource || lgSource || xlSource || null
+
+  const srcSet = `${md} 640w, ${lg} 1280w, ${xl} 1920w`
+
+  return (
+    <figure className="w-full">
+      <div className="relative mx-auto w-full max-w-[1280px]">
+        {blurBackdropSrc && (
+          <div className="pointer-events-none absolute inset-0 -z-10 scale-105 overflow-hidden rounded-2xl">
+            <img
+              src={blurBackdropSrc}
+              alt=""
+              aria-hidden="true"
+              className="h-full w-full object-cover opacity-35 blur-2xl"
+              loading="lazy"
+              decoding="async"
+            />
+          </div>
+        )}
+
+        {hasRealArtworkImage && (
+          <div className="absolute inset-0 -z-10 rounded-2xl bg-gradient-to-b from-nova-700/20 via-nova-900/15 to-deep/40" />
+        )}
+
+        <div className="relative w-full aspect-video rounded-xl overflow-hidden bg-deep shadow-2xl ring-1 ring-nova-600/30">
+          <img
+            src={md}
+            alt={artwork?.title ?? 'Artwork'}
+            className="absolute inset-0 h-full w-full object-contain"
+            loading="eager"
+            decoding="async"
+          />
+
+          <img
+            src={lg}
+            srcSet={srcSet}
+            sizes="(min-width: 1280px) 1280px, (min-width: 768px) 90vw, 100vw"
+            alt={artwork?.title ?? 'Artwork'}
+            className={`absolute inset-0 h-full w-full object-contain transition-opacity duration-500 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}
+            loading="eager"
+            decoding="async"
+            onLoad={() => setIsLoaded(true)}
+            onError={(event) => {
+              event.currentTarget.src = FALLBACK_LG
+            }}
+          />
+        </div>
+
+        {hasRealArtworkImage && (
+          <div className="pointer-events-none absolute inset-x-8 -bottom-5 h-10 rounded-full bg-accent/25 blur-2xl" />
+        )}
+      </div>
+    </figure>
+  )
+}