Changelog 01

1import { cn } from "@/lib/utils";
2import { Badge } from "@/components/ui/badge";
3 
4interface ChangelogEntry {
5  version: string;
6  date: string;
7  title: string;
8  description?: string;
9  highlights?: string[];
10  img?: string;
11  type?: "feature" | "improvement" | "fix" | "breaking";
12}
13 
14interface Changelog01Props {
15  label?: string;
16  title?: string;
17  description?: string;
18  entries?: ChangelogEntry[];
19  className?: string;
20}
21 
22const typeColors: Record<string, string> = {
23  feature: "bg-emerald-100 text-emerald-700",
24  improvement: "bg-blue-100 text-blue-700",
25  fix: "bg-amber-100 text-amber-700",
26  breaking: "bg-red-100 text-red-700",
27};
28 
29const typeLabels: Record<string, string> = {
30  feature: "New Feature",
31  improvement: "Improvement",
32  fix: "Bug Fix",
33  breaking: "Breaking Change",
34};
35 
36const ChangelogEntryCard = ({
37  version,
38  date,
39  title,
40  description,
41  highlights,
42  img,
43  type,
44}: ChangelogEntry) => (
45  <div className="relative pb-12 pl-8 last:pb-0">
46    <div className="absolute top-3 bottom-0 left-[7px] w-px bg-border last:hidden" />
47    <div className="absolute top-1.5 left-0 size-4 rounded-full border-2 border-primary bg-primary" />
48    <div className="flex flex-col gap-3">
49      <div className="flex flex-wrap items-center gap-2">
50        <Badge variant="outline" className="font-mono text-xs">
51          {version}
52        </Badge>
53        {type && (
54          <Badge className={cn("text-xs font-medium", typeColors[type])}>
55            {typeLabels[type]}
56          </Badge>
57        )}
58      </div>
59      <h3 className="text-xl font-medium tracking-tight">{title}</h3>
60      <span className="text-sm text-muted-foreground">{date}</span>
61      {description && (
62        <p className="leading-relaxed text-muted-foreground">{description}</p>
63      )}
64      {img && (
65        <div className="overflow-hidden rounded-md border bg-muted/30">
66          <img
67            src={img}
68            alt={title}
69            className="aspect-video w-full object-cover"
70          />
71        </div>
72      )}
73      {highlights && highlights.length > 0 && (
74        <ul className="flex flex-col gap-2 pt-2">
75          {highlights.map((highlight, index) => (
76            <li
77              key={index}
78              className="flex items-start gap-2 text-sm text-muted-foreground"
79            >
80              <span className="mt-2 size-1 shrink-0 rounded-full bg-muted-foreground" />
81              {highlight}
82            </li>
83          ))}
84        </ul>
85      )}
86    </div>
87  </div>
88// … truncated