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