astro-ghostcms/packages/astro-ghostcms-brutalbyelian/src/components/blog/BlogSummaryCard.astro

47 lines
1.2 KiB
Plaintext

---
import SummaryCard from '../generic/SummaryCard.astro';
import type { Settings, Post, Tag } from "@matthiesenxyz/astro-ghostcms/api";
import { getGhostImgPath, formatDate } from "../../utils";
import { Pill } from '@eliancodes/brutal-ui';
import Button from "../generic/button.astro"
interface Props {
post: Post;
settings: Settings;
};
const { post, settings } = Astro.props;
---
<SummaryCard
title={post.title}
imgAlt={post.feature_image_alt
? post.feature_image_alt : post.feature_image_caption
? post.feature_image_caption : post.title}
imgSrc={getGhostImgPath(settings.url, post.feature_image || "", 800)}
description={post.excerpt}
>
<div class='flex justify-end my-4'>
<Button href={`/${post.slug}/`}>Read post &rarr;</Button>
</div>
<div class='hidden sm:inline-block'>
<p class='poppins mt-2'>tags:</p>
<div class='flex justify-between items-center'>
<ul class='flex gap-4 mt-2'>
{
post.tags && post.tags.map((tag) => {
return (
<li>
<a class="sanchez" href={`/tag/${tag.slug}/`}>
<Pill>{tag.name}</Pill>
</a>
</li>
);
})
}
</ul>
</div>
</div>
</SummaryCard>