[dyad] Added a changelog page - wrote 3 file(s)

src/components/changelog.tsx

@@ -0,0 +1,79 @@
+"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>
+  );
+}