41 lines
686 B
Svelte
41 lines
686 B
Svelte
<script lang="ts">
|
|
import PhotoItem from '$components/PhotoItem.svelte'
|
|
import type { PhotoItem as PhotoItemType } from '$lib/types/photos'
|
|
|
|
const {
|
|
photoItems,
|
|
albumSlug
|
|
}: {
|
|
photoItems: PhotoItemType[]
|
|
albumSlug?: string
|
|
} = $props()
|
|
</script>
|
|
|
|
<div class="photo-grid-container">
|
|
<div class="photo-grid">
|
|
{#each photoItems as item}
|
|
<PhotoItem {item} {albumSlug} />
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.photo-grid-container {
|
|
width: 100%;
|
|
}
|
|
|
|
.photo-grid {
|
|
columns: 3;
|
|
column-gap: $unit-3x;
|
|
margin: 0;
|
|
|
|
@include breakpoint('tablet') {
|
|
columns: 2;
|
|
column-gap: $unit-2x;
|
|
}
|
|
|
|
@include breakpoint('phone') {
|
|
columns: 1;
|
|
}
|
|
}
|
|
</style>
|