54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
import { clsx } from 'clsx/lite';
|
|
import { Photo, PhotoSetCategory } from '.';
|
|
import PhotoGrid from './PhotoGrid';
|
|
import Link from 'next/link';
|
|
|
|
export default function PhotoLightbox({
|
|
count,
|
|
photos,
|
|
maxPhotosToShow = 6,
|
|
moreLink,
|
|
...categories
|
|
}: {
|
|
count: number
|
|
photos: Photo[]
|
|
maxPhotosToShow?: number
|
|
moreLink: string
|
|
} & PhotoSetCategory) {
|
|
const photoCountToShow = maxPhotosToShow < count
|
|
? maxPhotosToShow - 1
|
|
: maxPhotosToShow;
|
|
|
|
const countNotShown = count - photoCountToShow;
|
|
|
|
const showOverageTile = countNotShown > 0;
|
|
|
|
return (
|
|
<div className={clsx(
|
|
'border-main p-1.5 lg:p-2 rounded-md',
|
|
'bg-gray-50 dark:bg-gray-950',
|
|
)}>
|
|
<PhotoGrid
|
|
{...categories}
|
|
photos={photos.slice(0, photoCountToShow)}
|
|
animate={false}
|
|
additionalTile={showOverageTile
|
|
? <Link
|
|
href={moreLink}
|
|
className={clsx(
|
|
'flex flex-col items-center justify-center',
|
|
'gap-0.5 lg:gap-1',
|
|
)}
|
|
>
|
|
<div className="text-[1.1rem] lg:text-[1.5rem]">
|
|
+{countNotShown}
|
|
</div>
|
|
<div className="text-dim">More</div>
|
|
</Link>
|
|
: undefined}
|
|
small
|
|
/>
|
|
</div>
|
|
);
|
|
}
|