[dyad] Adding a language switcher - wrote 9 file(s)

src/components/footer.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { Github, Twitter } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { changelogData } from "@/lib/changelog-data";
+import { LanguageSwitcher } from "./language-switcher";
 
 export function Footer() {
   const latestVersion = changelogData[0]?.version;
@@ -14,6 +15,7 @@ export function Footer() {
         </div>
 
         <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center gap-1">
+          <LanguageSwitcher />
           <Button variant="ghost" size="icon" asChild>
             <Link href="https://github.com/" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
               <Github className="h-4 w-4" />

src/components/home-page.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { ImageConverter } from "@/components/image-converter";
+import { useTranslation } from "@/context/i18n-context";
+
+export function HomePage() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="relative flex flex-col items-center justify-center min-h-screen p-4 sm:p-8 bg-gray-50 dark:bg-background font-[family-name:var(--font-geist-sans)]">
+      <main className="flex flex-col items-center w-full max-w-6xl z-10">
+        <div className="text-center mb-8">
+          <h1 className="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-5xl">
+            {t('appTitle')}
+          </h1>
+          <p className="mt-3 text-lg text-gray-600 dark:text-gray-400">
+            {t('appDescription')}
+          </p>
+        </div>
+        <ImageConverter />
+      </main>
+    </div>
+  );
+}

src/components/image-converter.tsx

@@ -36,6 +36,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { useTranslation } from "@/context/i18n-context";
 
 const aspectRatios = [
   { name: "Custom", value: "custom" },
@@ -64,6 +65,7 @@ const initialSettings = {
 };
 
 export function ImageConverter() {
+  const { t } = useTranslation();
   const [images, setImages] = useState<File[]>([]);
   const [previewUrls, setPreviewUrls] = useState<string[]>([]);
   const [filenames, setFilenames] = useState<string[]>([]);
@@ -427,7 +429,7 @@ export function ImageConverter() {
           <Card>
             <CardContent className="pt-6">
               <div className="space-y-4">
-                <h3 className="text-lg font-medium">Upload Images</h3>
+                <h3 className="text-lg font-medium">{t('uploadTitle')}</h3>
                 <div
                   className={cn(
                     "w-full h-48 rounded-lg border-2 border-dashed flex items-center justify-center relative transition-colors cursor-pointer hover:border-primary/60",
@@ -440,8 +442,8 @@ export function ImageConverter() {
                 >
                   <div className="flex flex-col items-center justify-center text-center text-muted-foreground">
                     <Upload className="w-8 h-8 mb-2" />
-                    <p className="font-semibold">Click or drag and drop to upload</p>
-                    <p className="text-xs text-muted-foreground mt-1">PNG, JPG, WEBP supported</p>
+                    <p className="font-semibold">{t('uploadPrompt')}</p>
+                    <p className="text-xs text-muted-foreground mt-1">{t('uploadFormats')}</p>
                   </div>
                   <Input type="file" ref={fileInputRef} onChange={handleImageChange} className="hidden" accept="image/*" multiple />
                 </div>
@@ -453,11 +455,11 @@ export function ImageConverter() {
             <Card>
               <CardHeader>
                 <div className="flex justify-between items-center">
-                  <CardTitle>Uploaded Images</CardTitle>
+                  <CardTitle>{t('uploadedImagesTitle')}</CardTitle>
                   <div className="flex items-center gap-2">
                     <Tooltip>
                       <TooltipTrigger asChild>
-                        <Button variant="ghost" size="sm" onClick={handleClearAll} disabled={isConverting || convertingIndex !== null}><Trash2 className="mr-2 h-4 w-4" />Clear All</Button>
+                        <Button variant="ghost" size="sm" onClick={handleClearAll} disabled={isConverting || convertingIndex !== null}><Trash2 className="mr-2 h-4 w-4" />{t('clearAll')}</Button>
                       </TooltipTrigger>
                       <TooltipContent>
                         <p>Remove all uploaded images.</p>
@@ -467,7 +469,7 @@ export function ImageConverter() {
                       <TooltipTrigger asChild>
                         <Button onClick={handleConvertAndDownloadAll} disabled={!hasImages || isConverting || convertingIndex !== null}>
                           <Download className="mr-2 h-4 w-4" />
-                          {isConverting ? "Converting..." : `Download All (${images.length})`}
+                          {isConverting ? "Converting..." : t('downloadAll', { count: images.length })}
                         </Button>
                       </TooltipTrigger>
                       <TooltipContent>

src/components/language-switcher.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useTranslation } from "@/context/i18n-context";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Languages } from "lucide-react";
+
+export function LanguageSwitcher() {
+  const { setLanguage } = useTranslation();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <Languages className="h-4 w-4" />
+          <span className="sr-only">Change language</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setLanguage("en")}>
+          English
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setLanguage("de")}>
+          Deutsch
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}