website/src/components/HeroCard.astro
Max Richter 19a703367d
All checks were successful
Deploy to SFTP Server / build (push) Successful in 21m8s
fix: some errors
2025-02-16 15:53:02 +01:00

56 lines
1.5 KiB
Plaintext

---
import markdownToText from "@helpers/markdownToText";
import { Card } from "./card";
import { useTranslatedPath, useTranslations } from "@i18n/utils";
import Image from "@components/Image.astro";
import type { InferEntrySchema } from "astro:content";
interface Props {
post: {
data: InferEntrySchema<"projects">;
collection: string;
id: string;
body?: string;
};
}
const {
data: { title, cover, icon },
collection,
body,
id,
} = Astro.props.post;
const translatePath = useTranslatedPath(Astro.url);
const t = useTranslations(Astro.url);
const link = translatePath(`/${collection}/${id.split("/")[0]}`);
---
<Card
classes={`grid gradient border-1 border-neutral overflow-hidden ${cover ? "grid-rows-[200px_1fr] xs:grid-rows-none xs:grid-cols-[1fr_200px]" : ""}`}>
<Card.Content classes="px-8 py-7 order-last xs:order-first">
<Card.Title classes="text-4xl flex items-center gap-2">
{icon && <img src={icon} class="h-6 w-6" />}
{title}
</Card.Title>
<Card.Description>
{markdownToText(body ?? "").slice(0, 200)}
</Card.Description>
<Card.ReadMoreButton link={link} text={t("read-more")} />
</Card.Content>
{
cover && (
<a href={link}>
<Image
hash
loader={false}
src={cover as ImageMetadata}
alt={"cover for " + title}
class="right-0 h-full object-cover object-center rounded-none border-l border-neutral"
/>
</a>
)
}
</Card>