new-personal-site/components/pages/blog/(sections)/BlogPostsListCard.tsx
Benjamin Toby a0a0ab8ee4 Updates
2025-07-20 10:35:54 +01:00

43 lines
1.3 KiB
TypeScript

import Card from "@/components/lib/elements/Card";
import H2 from "@/components/lib/layout/H2";
import Row from "@/components/lib/layout/Row";
import Span from "@/components/lib/layout/Span";
import Stack from "@/components/lib/layout/Stack";
import { DSQL_TBENME_BLOG_POSTS } from "@/types";
import {
ArrowRight,
ArrowUpRight,
CircleArrowOutUpRight,
Clock,
} from "lucide-react";
import React from "react";
type Props = {
post: DSQL_TBENME_BLOG_POSTS;
};
export default function BlogPostsListCard({ post }: Props) {
return (
<Card
href={`/blog/${post.slug}`}
linkProps={{ className: "p-0 !text-white" }}
>
<Row className="w-full justify-between">
<Stack className="gap-1">
<H2>{post.title}</H2>
<Span size="large" className="mb-2">
{post.excerpt}
</Span>
<Row>
<Clock size={13} opacity={0.4} />
<Span size="smaller" variant="faded">
{post.date_created?.substring(0, 24)}
</Span>
</Row>
</Stack>
<ArrowUpRight />
</Row>
</Card>
);
}