57 lines
1.6 KiB
TypeScript
57 lines
1.6 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-[1.5rem] font-bold ">{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 rounded border-none "
|
|
>
|
|
<CardHeader className="">
|
|
<CardTitle className="leading-snug font-bold ">
|
|
{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="secondary"
|
|
className="w-full mt-4 rounded bg-accent/20 hover:bg-accent/40"
|
|
>
|
|
<Link to="/posts/page/1">View all</Link>
|
|
</Button>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default PostListing
|