44 lines
1.7 KiB
Plaintext
44 lines
1.7 KiB
Plaintext
---
|
|
import { getAllCategories } from "@/content/photos/categories";
|
|
import { getSettings } from "@/content/settings/settings"
|
|
import { getImageUrl } from "@/lib/images";
|
|
import { getCategoryRoute } from "@/lib/routing";
|
|
import { Image } from "astro:assets";
|
|
|
|
const settings = await getSettings();
|
|
const categories = await getAllCategories(settings);
|
|
---
|
|
|
|
<div
|
|
id={`categoryindex`}
|
|
class="flex lg:flex-col flex-col py-12 px-12 lg:container mx-auto gap-y-10 gap-x-18 w-full"
|
|
>
|
|
<div class="flex flex-col justify-center items-center gap-2.5">
|
|
<h1 class="text-5xl font-bold">Categories</h1>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-5">
|
|
{ categories.map((category) => (
|
|
<div class="flex flex-row justify-center items-center">
|
|
<a href={getCategoryRoute(settings.photo, category)} class="group relative block w-[70%] overflow-hidden rounded-2xl shadow-md">
|
|
<div>
|
|
<Image
|
|
src={getImageUrl(category.thumbnail.url)}
|
|
alt={category.title}
|
|
width="1200"
|
|
height="630"
|
|
class="rounded-2xl transition-transform duration-300 group-hover:scale-102"
|
|
/>
|
|
|
|
<div class="absolute inset-0 bg-black/70 flex items-center justify-center p-6 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
|
|
<h3 class="text-white text-5xl font-bold text-center tracking-tight">
|
|
{category.title}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
)) }
|
|
</div>
|
|
</div>
|