updated gallery

resources/js/components/profile/tabs/TabFavourites.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import ArtworkCard from '../../gallery/ArtworkCard'
+import ArtworkGallery from '../../artwork/ArtworkGallery'
 
 function FavSkeleton() {
   return (
@@ -57,16 +57,16 @@ export default function TabFavourites({ favourites, isOwner, username }) {
         </div>
       ) : (
         <>
-          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
-            {items.map((art, i) => (
-              <ArtworkCard
-                key={art.id ?? i}
-                art={art}
-                loading={i < 8 ? 'eager' : 'lazy'}
-              />
-            ))}
+          <ArtworkGallery
+            items={items}
+            layout="grid"
+            className="grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4"
+            resolveCardProps={(_, index) => ({
+              loading: index < 8 ? 'eager' : 'lazy',
+            })}
+          >
             {loadingMore && Array.from({ length: 4 }).map((_, i) => <FavSkeleton key={`sk-${i}`} />)}
-          </div>
+          </ArtworkGallery>
 
           {nextCursor && (
             <div className="mt-8 text-center">