strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create custom layout for hovers with 3 images

Browse Source
This commit is contained in:
Sam Becker 2025-09-27 21:33:39 -05:00
parent e5a0c6a326
commit 1d0973bfd1
1 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/entity/EntityHover.tsx
View File

@ -49,17 +49,15 @@ export default function EntityHover({
return 6; return 6;
} else if (photosCount >= 4) { } else if (photosCount >= 4) {
return 4; return 4;
} else if (photosCount >= 2) {
return 2;
} else { } else {
return 1; return photosCount;
} }
}, [photosCount]); }, [photosCount]);
const gridClass = useMemo(() => { const gridClass = useMemo(() => {
if (photosCount >= 6) { if (photosCount >= 6) {
return 'grid-cols-3 grid-rows-2'; return 'grid-cols-3 grid-rows-2';
} else if (photosCount >= 4) { } else if (photosCount >= 3) {
return 'grid-cols-2 grid-rows-2'; return 'grid-cols-2 grid-rows-2';
} else if (photosCount >= 2) { } else if (photosCount >= 2) {
return 'grid-cols-2'; return 'grid-cols-2';
@ -68,6 +66,8 @@ export default function EntityHover({
} }
}, [photosCount]); }, [photosCount]);
const splitLayout = photosCount === 3;
const content = useMemo(() => const content = useMemo(() =>
<div className="relative w-full h-full"> <div className="relative w-full h-full">
{/* Photo grid */} {/* Photo grid */}
@ -77,6 +77,7 @@ export default function EntityHover({
<PhotoMedium <PhotoMedium
key={photos[index].id} key={photos[index].id}
photo={photos[index]} photo={photos[index]}
className={clsx(splitLayout && index === 0 && 'row-span-2')}
/>)} />)}
</div> </div>
{/* Placeholder grid */} {/* Placeholder grid */}
@ -90,7 +91,10 @@ export default function EntityHover({
{Array.from({ length: photosToShow }).map((_, index) => {Array.from({ length: photosToShow }).map((_, index) =>
<div <div
key={index} key={index}
className="border-[0.5px] border-main" className={clsx(
'border-[0.5px] border-main',
splitLayout && index === 0 && 'row-span-2',
)}
/>)} />)}
</div> </div>
{/* Text guard */} {/* Text guard */}
@ -133,6 +137,7 @@ export default function EntityHover({
</div> </div>
, [ , [
gridClass, gridClass,
splitLayout,
photosToShow, photosToShow,
photos, photos,
header, header,