updated gallery

resources/js/Pages/Home/HomeTrending.jsx

@@ -1,55 +1,5 @@
 import React from 'react'
-
-const FALLBACK     = 'https://files.skinbase.org/default/missing_md.webp'
-const AVATAR_FALLBACK = 'https://files.skinbase.org/default/avatar_default.webp'
-
-function ArtCard({ item }) {
-  const username = item.author_username ? `@${item.author_username}` : null
-
-  return (
-    <article className="min-w-[72%] snap-start sm:min-w-[44%] lg:min-w-0">
-      <a
-        href={item.url}
-        className="group relative block overflow-hidden rounded-2xl ring-1 ring-white/5 bg-black/20 shadow-lg shadow-black/40 transition-all duration-200 ease-out hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70"
-      >
-        <div className="relative aspect-video overflow-hidden bg-neutral-900">
-          {/* Gloss sheen */}
-          <div className="absolute inset-0 bg-gradient-to-br from-white/10 via-white/5 to-transparent pointer-events-none z-10" />
-
-          <img
-            src={item.thumb || FALLBACK}
-            alt={item.title}
-            className="h-full w-full object-cover transition-[transform,filter] duration-300 ease-out group-hover:scale-[1.04]"
-            loading="lazy"
-            decoding="async"
-            onError={(e) => { e.currentTarget.src = FALLBACK }}
-          />
-
-          {/* Top-right View badge */}
-          <div className="absolute right-3 top-3 z-30 flex items-center gap-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
-            <span className="inline-flex items-center rounded-md bg-black/60 px-2 py-1 text-[11px] font-medium text-white ring-1 ring-white/10">View</span>
-          </div>
-
-          {/* Bottom info overlay — always visible on mobile, hover-only on md+ */}
-          <div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-3 backdrop-blur-[2px] opacity-100 transition-opacity duration-200 md:opacity-0 md:group-hover:opacity-100 md:group-focus-visible:opacity-100">
-            <div className="truncate text-sm font-semibold text-white">{item.title}</div>
-            <div className="mt-1 flex items-center gap-2 text-xs text-white/80">
-              <img
-                src={item.author_avatar || AVATAR_FALLBACK}
-                alt={item.author}
-                className="w-6 h-6 rounded-full object-cover shrink-0"
-                onError={(e) => { e.currentTarget.src = AVATAR_FALLBACK }}
-              />
-              <span className="truncate">{item.author}</span>
-              {username && <span className="text-white/50 shrink-0">{username}</span>}
-            </div>
-          </div>
-        </div>
-        <span className="sr-only">{item.title} by {item.author}</span>
-      </a>
-    </article>
-  )
-}
+import ArtworkGalleryGrid from '../../components/artwork/ArtworkGalleryGrid'
 
 export default function HomeTrending({ items }) {
   if (!Array.isArray(items) || items.length === 0) return null
@@ -65,11 +15,10 @@ export default function HomeTrending({ items }) {
         </a>
       </div>
 
-      <div className="flex snap-x snap-mandatory gap-4 overflow-x-auto pb-3 lg:grid lg:grid-cols-5 lg:overflow-visible">
-        {items.slice(0, Math.floor(items.length / 5) * 5 || items.length).map((item) => (
-          <ArtCard key={item.id} item={item} />
-        ))}
-      </div>
+      <ArtworkGalleryGrid
+        items={items.slice(0, 8)}
+        className="xl:grid-cols-4"
+      />
     </section>
   )
 }