phobos/src/pages/characters/[slug].astro
2024-07-25 20:44:11 +02:00

60 lines
1.5 KiB
Text

---
import Gallery from "../../layouts/Gallery.astro";
import Image from "../../components/Image.astro";
import pb from "../../lib/pb";
const { slug } = Astro.params;
const imageCollection = await pb.collection("images").getFullList({
sort: "-created",
filter: `(character.slug?~"${slug}")`,
});
const characterDetails = await pb
.collection("characters")
.getFirstListItem(`(slug~"${slug}")`);
const images = imageCollection.map((record) => {
const url = pb.files.getUrl(record, record.file, { thumb: record.thumb });
return {
url: url,
desc: record.description,
nsfw: record.nsfw,
artist: record.artist,
};
});
export const prerender = false;
---
<Gallery>
<div class="flex flex-col">
<div class="pb-4">
<h1 class="text-2xl text-center p-8">
<!-- <a href={`/characters`}> -->
{characterDetails.name}
<!-- </a> -->
</h1>
{
characterDetails.description && (
<div class="m-4 p-4 bg-[#11111156] backdrop-blur-md rounded-lg items-center justify-center">
<Fragment set:html={characterDetails.description} />
</div>
)
}
</div>
<div
class="gap-4 columns-2 lg:columns-3 xl:columns-4 2xl:columns-5 self-center"
>
{
images.map((image) => (
<Image
nsfw={image?.nsfw}
src={image?.url}
alt={image?.desc}
artist={image?.artist}
/>
))
}
</div>
</div>
</Gallery>
<!-- <style>
</style> -->