mirror of
https://github.com/Afilmory/afilmory
synced 2026-04-24 23:05:05 +00:00
fcee67b309
feat: Enhance PhotoAssetService with findPhotosByIds method for batch retrieval of photo manifests refactor: Move PhotoAsset types to a dedicated file for better organization feat: Introduce StaticAssetController and StaticShareController for handling static asset requests feat: Create StaticShareService to manage share page functionality and dynamic data injection refactor: Consolidate static web controller logic into StaticBaseController for code reuse fix: Update module imports to reflect new directory structure for AppStateModule chore: Update pnpm lockfile to include new dependencies Signed-off-by: Innei <tukon479@gmail.com>
30 lines
776 B
TypeScript
30 lines
776 B
TypeScript
import type { PhotoManifestItem } from '@afilmory/builder'
|
|
import { useMemo } from 'react'
|
|
import Masonry from 'react-responsive-masonry'
|
|
import { useWindowSize } from 'usehooks-ts'
|
|
|
|
import { PhotoItem } from './PhotoItem'
|
|
|
|
interface MasonryGalleryProps {
|
|
photos: PhotoManifestItem[]
|
|
}
|
|
|
|
export function MasonryGallery({ photos }: MasonryGalleryProps) {
|
|
const { width } = useWindowSize()
|
|
|
|
const columnsCount = useMemo(() => {
|
|
if (width < 600) return 1
|
|
if (width < 800) return 2
|
|
return 3
|
|
}, [width])
|
|
return (
|
|
<div className="scrollbar-none h-screen overflow-auto">
|
|
<Masonry gutter={4} columnsCount={columnsCount}>
|
|
{photos.map((photo) => (
|
|
<PhotoItem key={photo.id} photo={photo} />
|
|
))}
|
|
</Masonry>
|
|
</div>
|
|
)
|
|
}
|