89 lines
2.0 KiB
TypeScript
89 lines
2.0 KiB
TypeScript
import AnimateItems from '@/components/AnimateItems';
|
|
import { Photo } from '.';
|
|
import PhotoLarge from './PhotoLarge';
|
|
import SiteGrid from '@/components/SiteGrid';
|
|
import PhotoGrid from './PhotoGrid';
|
|
import { cc } from '@/utility/css';
|
|
import PhotoLinks from './PhotoLinks';
|
|
import TagHeader from '@/tag/TagHeader';
|
|
import { Camera } from '@/camera';
|
|
import CameraHeader from '@/camera/CameraHeader';
|
|
|
|
export default function PhotoDetailPage({
|
|
photo,
|
|
photos,
|
|
photosGrid,
|
|
tag,
|
|
camera,
|
|
}: {
|
|
photo: Photo
|
|
photos: Photo[]
|
|
photosGrid?: Photo[]
|
|
tag?: string
|
|
camera?: Camera
|
|
}) {
|
|
return (
|
|
<div>
|
|
{tag &&
|
|
<SiteGrid
|
|
className="mt-4 mb-8"
|
|
contentMain={
|
|
<TagHeader
|
|
key={tag}
|
|
tag={tag}
|
|
photos={photos}
|
|
selectedPhoto={photo}
|
|
/>}
|
|
/>}
|
|
{camera &&
|
|
<SiteGrid
|
|
className="mt-4 mb-8"
|
|
contentMain={
|
|
<CameraHeader
|
|
key={tag}
|
|
camera={camera}
|
|
photos={photos}
|
|
selectedPhoto={photo}
|
|
/>}
|
|
/>}
|
|
<AnimateItems
|
|
className="md:mb-8"
|
|
animateFromAppState
|
|
items={[
|
|
<PhotoLarge
|
|
key={photo.id}
|
|
photo={photo}
|
|
tag={tag}
|
|
priority
|
|
prefetchShare
|
|
shareCamera={camera !== undefined}
|
|
shouldScrollOnShare={false}
|
|
showCamera={!camera}
|
|
/>,
|
|
]}
|
|
/>
|
|
<SiteGrid
|
|
sideFirstOnMobile
|
|
contentMain={<PhotoGrid
|
|
photos={photosGrid ?? photos}
|
|
selectedPhoto={photo}
|
|
tag={tag}
|
|
animateOnFirstLoadOnly
|
|
/>}
|
|
contentSide={<div className={cc(
|
|
'grid grid-cols-2',
|
|
'md:flex md:gap-4',
|
|
'user-select-none',
|
|
)}>
|
|
<PhotoLinks {...{
|
|
photo,
|
|
photos,
|
|
tag,
|
|
camera,
|
|
}} />
|
|
</div>}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|