systems-obscure/src/containers/PostListing.tsx
thomasabishop 9a62f7bd1b
All checks were successful
Deploy Blog / deploy (push) Successful in 1m8s
refactor: style tweaks
2025-07-13 14:27:48 +01:00

55 lines
1.4 KiB
TypeScript

// @ts-nocheck
import {
Card,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Link } from "react-router"
import { convertDate } from "@/utils/convertDate"
const PostListing = ({ posts, title, showAllButton }) => {
return (
<>
<div className="mb-5 ">
<h2 className="scroll-m-20 text-2xl font-bold lg:text-2xl border-b pb-3">
{title}
</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-1 gap-3">
{posts.map((post) => (
<Link
to={`/posts/${post.slug}`}
key={post.slug}
className="block no-underline"
>
<Card
key={post.slug}
className="flex flex-col h-full hover:bg-primary/5 py-4 px-0"
>
<CardHeader className="px-4 md:px-6">
<CardTitle className="leading-snug font-semibold ">
{post.title}
</CardTitle>
<CardDescription className="text-sm text-muted-foreground">
<div className="flex justify-between gap-2">
<span className="text-sm">{convertDate(post.date)}</span>
</div>
</CardDescription>
</CardHeader>
</Card>
</Link>
))}
</div>
{showAllButton && (
<Button asChild variant="" className="w-full mt-4">
<Link to="/posts/page/1">View all</Link>
</Button>
)}
</>
)
}
export default PostListing