87 lines
3.2 KiB
Plaintext
87 lines
3.2 KiB
Plaintext
---
|
|
import { getLastAlbums } from "@/content/photos/albums";
|
|
import { getSettings } from "@/content/settings/settings";
|
|
import CalendarIcon from "@/icons/CalendarIcon.astro";
|
|
import { getImageUrl } from "@/lib/images";
|
|
import { getAlbumRoute } from "@/lib/routing";
|
|
import { Image } from "astro:assets";
|
|
|
|
interface Props {
|
|
albums: LastGalleriesComponent;
|
|
}
|
|
|
|
function calculateSizeClasses(amount: number, length: number) {
|
|
if (amount === 2 || length <= 2) {
|
|
return "lg:w-[45%] w-full";
|
|
}
|
|
else {
|
|
return "lg:w-[31%] w-full";
|
|
}
|
|
}
|
|
const albums = Astro.props.albums;
|
|
const settings = await getSettings();
|
|
const lastAlbums = await getLastAlbums(albums.amount);
|
|
const size = calculateSizeClasses(albums.amount, lastAlbums.length);
|
|
|
|
const testAlbums = [...lastAlbums, ...lastAlbums, ...lastAlbums, ...lastAlbums];
|
|
---
|
|
|
|
{ settings.photo.enabled && (
|
|
<div
|
|
id={`lastalbums-${albums.id}`}
|
|
class="flex lg:flex-col flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full"
|
|
>
|
|
<div class="flex flex-row justify-between items-center w-full">
|
|
<h2 class="text-4xl font-bold">{albums.title}</h2>
|
|
<div>
|
|
<a
|
|
href={settings.photo.categoryIndex.indexRouteTemplate}
|
|
class="text-(--ptt) bg-(--ptc) hover:text-(--stt) hover:bg-(--stc) duration-200 py-3 px-4 rounded-full"
|
|
>
|
|
{albums.readMoreButtonText}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{ testAlbums.length >= 4 ? (
|
|
<div class="grid lg:grid-cols-2 lg:grid-rows-2 grid-cols-1 grid-rows-4 gap-x-10 gap-y-8">
|
|
{ testAlbums.map((album) => (
|
|
<a href={getAlbumRoute(settings.photo, album)} class={`w-full flex flex-col gap-2`}>
|
|
<Image
|
|
src={getImageUrl(album.thumbnail.url)}
|
|
alt={album.title}
|
|
class="flex rounded-2xl shadow-md w-full"
|
|
width={600}
|
|
height={315}
|
|
/>
|
|
<h4 class="font-semibold text-[28px]">{album.title}</h4>
|
|
<div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
|
|
<CalendarIcon width={20} height={20} />
|
|
<div>{album.startDate}</div>
|
|
</div>
|
|
</a>
|
|
)) }
|
|
</div>
|
|
|
|
) : (
|
|
<div class="flex flex-col lg:flex-row lg:justify-between gap-y-6">
|
|
{ lastAlbums.map((album) => (
|
|
<a href={getAlbumRoute(settings.photo, album)} class={`${size} flex flex-col gap-2`}>
|
|
<Image
|
|
src={getImageUrl(album.thumbnail.url)}
|
|
alt={album.title}
|
|
class="flex rounded-2xl shadow-md w-full"
|
|
width={600}
|
|
height={315}
|
|
/>
|
|
<h4 class="font-semibold text-[28px]">{album.title}</h4>
|
|
<div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
|
|
<CalendarIcon width={20} height={20} />
|
|
<div>{album.startDate}</div>
|
|
</div>
|
|
</a>
|
|
)) }
|
|
</div>
|
|
) }
|
|
</div>
|
|
) } |