52 lines
2.1 KiB
TypeScript
52 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
import { changelogData } from "@/lib/changelog-data";
|
|
|
|
export function Changelog() {
|
|
return (
|
|
<div className="w-full max-w-4xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center mb-12">
|
|
<h1 className="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-5xl">
|
|
Changelog
|
|
</h1>
|
|
<p className="mt-3 text-lg text-gray-600 dark:text-gray-400">
|
|
Tracking all the new features, improvements, and bug fixes.
|
|
</p>
|
|
</div>
|
|
<div className="space-y-8">
|
|
{changelogData.map((entry) => (
|
|
<Card key={entry.version}>
|
|
<CardHeader>
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
|
|
<CardTitle className="text-2xl font-bold">Version {entry.version}</CardTitle>
|
|
<p className="text-sm text-muted-foreground">{entry.date}</p>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ul className="space-y-4">
|
|
{entry.changes.map((change, index) => (
|
|
<li key={index} className="flex items-start gap-4">
|
|
<Badge
|
|
variant="outline"
|
|
className={cn("mt-1 shrink-0 font-semibold", {
|
|
"border-blue-500/50 bg-blue-500/10 text-blue-700 dark:text-blue-300": change.type === "Improved",
|
|
"border-green-500/50 bg-green-500/10 text-green-700 dark:text-green-300": change.type === "New",
|
|
"border-red-500/50 bg-red-500/10 text-red-700 dark:text-red-300": change.type === "Fixed",
|
|
})}
|
|
>
|
|
{change.type}
|
|
</Badge>
|
|
<p className="text-foreground">{change.text}</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |