Implement i18n with German and English support (default DE)

components/create-plan-form.tsx

@@ -2,6 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod"
 import { format } from "date-fns"
+import { de, enUS } from "date-fns/locale"
 import { CalendarIcon } from "lucide-react"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
@@ -23,19 +24,25 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { toast } from "sonner"
 import { useRouter } from "next/navigation"
 
-const formSchema = z.object({
-    dateRange: z.object({
-        from: z.date(),
-        to: z.date(),
-    }),
-    password: z.string().min(4, {
-        message: "Password must be at least 4 characters.",
-    }),
-    instructions: z.string().optional(),
-})
+interface CreatePlanFormProps {
+    dict: any;
+    lang: string;
+}
 
-export function CreatePlanForm() {
+export function CreatePlanForm({ dict, lang }: CreatePlanFormProps) {
     const router = useRouter()
+
+    const formSchema = z.object({
+        dateRange: z.object({
+            from: z.date(),
+            to: z.date(),
+        }),
+        password: z.string().min(4, {
+            message: dict.passwordError,
+        }),
+        instructions: z.string().optional(),
+    })
+
     const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),
         defaultValues: {
@@ -44,6 +51,8 @@ export function CreatePlanForm() {
         },
     })
 
+    const dateLocale = lang === "de" ? de : enUS
+
     async function onSubmit(values: z.infer<typeof formSchema>) {
         try {
             const response = await fetch("/api/plan", {
@@ -62,10 +71,10 @@ export function CreatePlanForm() {
             }
 
             const data = await response.json()
-            toast.success("Plan created successfully!")
-            router.push(`/dashboard/${data.planId}`)
+            toast.success(dict.success)
+            router.push(`/${lang}/dashboard/${data.planId}`)
         } catch (error) {
-            toast.error("Something went wrong. Please try again.")
+            toast.error(dict.error)
             console.error(error)
         }
     }
@@ -78,7 +87,7 @@ export function CreatePlanForm() {
                     name="dateRange"
                     render={({ field }) => (
                         <FormItem className="flex flex-col">
-                            <FormLabel>Travel Dates</FormLabel>
+                            <FormLabel>{dict.travelDates}</FormLabel>
                             <Popover>
                                 <PopoverTrigger asChild>
                                     <FormControl>
@@ -92,14 +101,14 @@ export function CreatePlanForm() {
                                             {field.value?.from ? (
                                                 field.value.to ? (
                                                     <>
-                                                        {format(field.value.from, "LLL dd, y")} -{" "}
-                                                        {format(field.value.to, "LLL dd, y")}
+                                                        {format(field.value.from, "PPP", { locale: dateLocale })} -{" "}
+                                                        {format(field.value.to, "PPP", { locale: dateLocale })}
                                                     </>
                                                 ) : (
-                                                    format(field.value.from, "LLL dd, y")
+                                                    format(field.value.from, "PPP", { locale: dateLocale })
                                                 )
                                             ) : (
-                                                <span>Pick a date range</span>
+                                                <span>{dict.pickDateRange}</span>
                                             )}
                                             <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                                         </Button>
@@ -114,11 +123,12 @@ export function CreatePlanForm() {
                                             date < new Date(new Date().setHours(0, 0, 0, 0))
                                         }
                                         initialFocus
+                                        locale={dateLocale}
                                     />
                                 </PopoverContent>
                             </Popover>
                             <FormDescription>
-                                Select the days you will be away.
+                                {dict.dateRangeDesc}
                             </FormDescription>
                             <FormMessage />
                         </FormItem>
@@ -129,18 +139,18 @@ export function CreatePlanForm() {
                     name="password"
                     render={({ field }) => (
                         <FormItem>
-                            <FormLabel>Group Password</FormLabel>
+                            <FormLabel>{dict.groupPassword}</FormLabel>
                             <FormControl>
-                                <Input placeholder="secret-meow" {...field} />
+                                <Input placeholder={dict.passwordPlaceholder} {...field} />
                             </FormControl>
                             <FormDescription>
-                                Share this password with your cat sitters.
+                                {dict.passwordDesc}
                             </FormDescription>
                             <FormMessage />
                         </FormItem>
                     )}
                 />
-                <Button type="submit">Create Plan</Button>
+                <Button type="submit">{dict.submit}</Button>
             </form>
         </Form>
     )