systems-obscure/src/containers/PostListing.tsx

// @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.3rem] font-semibold border-b pb-2">
          {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-none"
            >
              <CardHeader className="">
                <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="secondary" className="w-full mt-4">
          <Link to="/posts/page/1">View all</Link>
        </Button>
      )}
    </>
  )
}

export default PostListing