Files
Website/src/components/PostComponent.astro
Chaoscaot dda37127ca
All checks were successful
SteamWarCI Build successful
Use type import and update page load event handling.
2025-02-23 09:59:37 +01:00

50 lines
1.8 KiB
Plaintext

---
import type {CollectionEntry} from "astro:content";
import {l} from "../util/util";
import {astroI18n} from "astro-i18n";
import {Image} from "astro:assets";
import TagComponent from "./TagComponent.astro";
import P from "./P.astro";
import Card from "@components/Card.svelte";
interface Props {
post: CollectionEntry<"announcements">
}
const { post, slim }: {
post: CollectionEntry<"announcements">,
slim: boolean,
} = Astro.props as Props;
const postUrl = l(`/announcements/${post.slug.split("/").slice(1).join("/")}`);
---
<Card extraClasses={`w-full items-start mx-0 ${slim ? "m-0 p-1" : ""}`} hoverEffect={false}>
<div class={`flex flex-row ${slim ? "":"p-4"}`}>
{post.data.image != null
? (
<a href={postUrl}>
<div class="flex-shrink-0 pr-2">
<Image transition:name={post.data.title + "-image"} src={post.data.image} alt="Post Image" class="rounded-2xl shadow-2xl object-cover h-32 w-32 max-w-none transition-transform hover:scale-105" />
</div>
</a>
)
: null}
<div>
<a href={postUrl} class="flex flex-col items-start">
<h2 class="text-2xl font-bold" transition:name={post.data.title + "-title"}>{post.data.title}</h2>
<P class="text-gray-500">{Intl.DateTimeFormat(astroI18n.locale, {
day: "numeric",
month: "long",
year: "numeric",
}).format(post.data.created)}</P>
<P>{post.data.description}</P>
</a>
<div class="mt-1" transition:name={post.data.title + "-tags"}>
{post.data.tags.map((tag) => (
<TagComponent tag={tag} />
))}
</div>
</div>
</div>
</Card>