60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import { cc } from '@/utility/css';
|
||
import { Photo, PhotoDateRange, dateRangeForPhotos } from '.';
|
||
import ShareButton from '@/components/ShareButton';
|
||
|
||
export default function PhotoHeader({
|
||
entity,
|
||
entityVerb,
|
||
entityDescription,
|
||
photos,
|
||
selectedPhoto,
|
||
sharePath,
|
||
count,
|
||
dateRange,
|
||
}: {
|
||
entity: JSX.Element
|
||
entityVerb: string
|
||
entityDescription: string
|
||
photos: Photo[]
|
||
selectedPhoto?: Photo
|
||
sharePath: string
|
||
count?: number
|
||
dateRange?: PhotoDateRange
|
||
}) {
|
||
const { start, end } = dateRangeForPhotos(photos, dateRange);
|
||
|
||
const selectedPhotoIndex = selectedPhoto
|
||
? photos.findIndex(photo => photo.id === selectedPhoto.id)
|
||
: undefined;
|
||
|
||
return (
|
||
<div className={cc(
|
||
'flex flex-col gap-y-0.5',
|
||
'xs:grid grid-cols-2 sm:grid-cols-4 md:grid-cols-3 lg:grid-cols-4',
|
||
)}>
|
||
{entity}
|
||
<span className={cc(
|
||
'inline-flex gap-2 items-center self-start',
|
||
'uppercase text-gray-400 dark:text-gray-500',
|
||
'sm:col-span-2 md:col-span-1 lg:col-span-2',
|
||
)}>
|
||
{selectedPhotoIndex !== undefined
|
||
// eslint-disable-next-line max-len
|
||
? `${entityVerb} ${selectedPhotoIndex + 1} of ${count ?? photos.length}`
|
||
: entityDescription}
|
||
{selectedPhotoIndex === undefined &&
|
||
<ShareButton path={sharePath} dim />}
|
||
</span>
|
||
<span className={cc(
|
||
'hidden sm:inline-block',
|
||
'text-right uppercase',
|
||
'text-gray-400 dark:text-gray-500',
|
||
)}>
|
||
{start === end
|
||
? start
|
||
: <>{start}<br />– {end}</>}
|
||
</span>
|
||
</div>
|
||
);
|
||
}
|