feat: ✨ use number input for guests

- Add translations

src/app/(frontend)/[locale]/contact/reservation-form.tsx

@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button";
 import DateTimePicker from "./date-time-picker";
 import { Field } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
+import { NumberInput } from "@/components/ui/number-input";
 import { getI18n } from "@/i18n/server";
 import { stack } from "@styled-system/patterns";
 import { styled } from "@styled-system/jsx";
@@ -31,7 +32,7 @@ export default async function ReservationForm() {
       <DateTimePicker />
       <Field.Root id="guests">
         <Field.Label>{t("reservation.guests")}</Field.Label>
-        <Field.Input name="guests" placeholder={t("reservation.guests")} />
+        <NumberInput name="guests" />
       </Field.Root>
       <Field.Root id="message">
         <Field.Label>{t("contact.message")}</Field.Label>

src/i18n/de.ts

@@ -10,6 +10,7 @@ export default {
     openingTimes: "Öffnungszeiten",
     date: "Datum",
     time: "Zeit",
+    submit: "Absenden",
     en: "Englisch",
     de: "Deutsch",
     fr: "Französisch",
@@ -34,4 +35,7 @@ export default {
     message: "Nachricht",
     reservation: "Reservation",
   },
+  reservation: {
+    guests: "Gäste",
+  },
 } as const;

src/i18n/en.ts

@@ -10,6 +10,7 @@ export default {
     phoneNumber: "Phone",
     date: "Date",
     time: "Time",
+    submit: "Submit",
     en: "English",
     de: "German",
     fr: "French",