Horizontal Media Cards

1import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
2import { Badge } from "@/components/ui/badge"
3import { Button } from "@/components/ui/button"
4import { Card } from "@/components/ui/card"
5import { IconPlaceholder } from "@/components/icons/icon-placeholder"
6 
7type Post = {
8  title: string
9  excerpt: string
10  category: string
11  readTime: string
12  date: string
13  image: string
14  author: { name: string; initials: string; avatar: string }
15}
16 
17const posts: Post[] = [
18  {
19    title: "Designing for the first five minutes",
20    excerpt:
21      "Onboarding is the only part of your product every user sees. We rebuilt ours around a single question: what is the smallest win we can deliver today?",
22    category: "Product",
23    readTime: "6 Min Read",
24    date: "Jul 2, 2026",
25    image:
26      "https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=600&q=80",
27    author: {
28      name: "Devon Reyes",
29      initials: "DR",
30      avatar: "https://i.pravatar.cc/64?img=12",
31    },
32  },
33  {
34    title: "The case for boring infrastructure",
35    excerpt:
36      "Every exciting outage starts with an exciting technology choice. Here is why our platform team keeps reaching for the least novel option on the table.",
37    category: "Engineering",
38    readTime: "9 Min Read",
39    date: "Jun 24, 2026",
40    image:
41      "https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=600&q=80",
42    author: {
43      name: "Priya Nair",
44      initials: "PN",
45      avatar: "https://i.pravatar.cc/64?img=45",
46    },
47  },
48  {
49    title: "How we price without a sales team",
50    excerpt:
51      "Self-serve pricing sounds simple until you write the page. A look at the experiments, the mistakes, and the framework we landed on.",
52    category: "Growth",
53    readTime: "5 Min Read",
54    date: "Jun 15, 2026",
55    image:
56      "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&q=80",
57    author: {
58      name: "Sam Whitfield",
59      initials: "SW",
60      avatar: "https://i.pravatar.cc/64?img=59",
61    },
62  },
63]
64 
65function PostRow({ post }: { post: Post }) {
66  return (
67    <Card className="flex-row gap-0 overflow-hidden py-0 transition-colors hover:ring-foreground/25">
68      <div className="aspect-[4/3] w-40 shrink-0 overflow-hidden bg-muted sm:w-52">
69        <img
70          src={post.image}
71          alt=""
72          className="size-full object-cover grayscale"
73          loading="lazy"
74        />
75      </div>
76// … truncated