[dyad] Adding internationalization with next-intl - wrote 19 file(s), renamed 5 file(s), added next-intl package(s)

src/components/image-upload-area.tsx

@@ -5,12 +5,14 @@ import { Input } from "@/components/ui/input";
 import { Upload } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Card, CardContent } from "./ui/card";
+import { useTranslations } from "next-intl";
 
 interface ImageUploadAreaProps {
   onFilesSelected: (files: FileList | null) => void;
 }
 
 export function ImageUploadArea({ onFilesSelected }: ImageUploadAreaProps) {
+  const t = useTranslations("ImageUploadArea");
   const [isDraggingOver, setIsDraggingOver] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -39,7 +41,7 @@ export function ImageUploadArea({ onFilesSelected }: ImageUploadAreaProps) {
     <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('title')}</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",
@@ -52,8 +54,8 @@ export function ImageUploadArea({ onFilesSelected }: ImageUploadAreaProps) {
           >
             <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('prompt')}</p>
+              <p className="text-xs text-muted-foreground mt-1">{t('supportedFormats')}</p>
             </div>
             <Input type="file" ref={fileInputRef} onChange={handleImageChange} className="hidden" accept="image/*" multiple />
           </div>