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

src/app/changelog/page.tsx

@@ -0,0 +1,22 @@
+import { Changelog } from "@/components/changelog";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+
+export default function ChangelogPage() {
+  return (
+    <div className="relative flex flex-col items-center min-h-screen p-4 sm:p-8 bg-gray-50 dark:bg-background font-[family-name:var(--font-geist-sans)]">
+      <div className="w-full max-w-4xl mx-auto">
+        <Button asChild variant="ghost" className="mb-4 -ml-4">
+          <Link href="/">
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            Back to Converter
+          </Link>
+        </Button>
+      </div>
+      <main className="w-full">
+        <Changelog />
+      </main>
+    </div>
+  );
+}

src/app/page.tsx

@@ -1,4 +1,5 @@
 import { ImageConverter } from "@/components/image-converter";
+import Link from "next/link";
 
 export default function Home() {
   return (
@@ -14,6 +15,11 @@ export default function Home() {
         </div>
         <ImageConverter />
       </main>
+      <footer className="w-full max-w-6xl z-10 mt-8 py-4 text-center text-sm text-muted-foreground">
+        <Link href="/changelog" className="hover:text-primary transition-colors">
+          Changelog
+        </Link>
+      </footer>
     </div>
   );
 }

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>
+  );
+}