Files
Webify/src/components/changelog.tsx

79 lines
3.2 KiB
TypeScript

"use client";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { cn } from "@/lib/utils";
const changelogData = [
{
version: "1.2.0",
date: "July 26, 2024",
changes: [
{ type: "New", text: "Added a changelog page to track updates and new features." },
{ type: "Improved", text: "Implemented 'auto' dimensioning for batch processing. When one dimension (width or height) is set, the other is calculated automatically for each image to maintain its aspect ratio." },
{ type: "Fixed", text: "Enabled the 'Reset' and 'Apply' buttons to be used even when no images are uploaded." },
],
},
{
version: "1.1.0",
date: "July 25, 2024",
changes: [
{ type: "Improved", text: "Aspect ratio is now automatically detected from the first uploaded image and can be locked." },
{ type: "Fixed", text: "Corrected an issue where swapping dimensions would not update the aspect ratio to 'Custom'."}
],
},
{
version: "1.0.0",
date: "July 24, 2024",
changes: [
{ type: "New", text: "Initial release of the Image Web Exporter." },
{ type: "New", text: "Features include image uploading, format conversion (PNG, JPEG, WEBP), resizing, quality adjustment, and filename customization." },
],
},
];
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>
);
}