Post Card

1// Feed tile. Styled with base44 design tokens (shadcn Tailwind classes) — re-skin via those tokens, not this
2// JSX. The cover-image path (post.media.wixMedia.image.url) and the text-only fallback are
3// load-bearing: never substitute a stock/placeholder image. Routes to the detail page by slug.
4import { Link } from "react-router-dom";
5
6function coverImage(post) {
7  const url = post?.media?.wixMedia?.image?.url;         // ready-to-use https url; //-fix is defensive
8  return url ? (url.startsWith("//") ? `https:${url}` : url) : null;
9}
10
11function formatDate(iso) {
12  if (!iso) return null;
13  try { return new Date(iso).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" }); }
14  catch { return null; }
15}
16
17export default function PostCard({ post }) {
18  const image = coverImage(post);
19  const date = formatDate(post?.firstPublishedDate);
20
21  return (
22    <Link to={`/blog/${post.slug}`}
23      className="flex flex-col no-underline text-foreground bg-card border border-border rounded-lg overflow-hidden shadow-sm">
24      {image && (
25        <div className="aspect-[16/9] bg-background">
26          <img src={image} alt={post.media?.wixMedia?.image?.altText || post.title} loading="lazy"
27            className="w-full h-full object-cover" />
28        </div>
29      )}
30      <div className="p-4 flex flex-col gap-2">
31        <h3 className="m-0 font-display text-lg font-semibold leading-[1.3]">{post.title}</h3>
32        {post.excerpt && (
33          <p className="m-0 text-muted-foreground text-sm leading-[1.5]">{post.excerpt}</p>
34        )}
35        <div className="flex gap-2 items-center text-muted-foreground text-[12px]">
36          {date && <span>{date}</span>}
37          {date && post.minutesToRead ? <span aria-hidden="true">·</span> : null}
38          {post.minutesToRead ? <span>{post.minutesToRead} min read</span> : null}
39        </div>
40      </div>
41    </Link>
42  );
43}