You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

46 lines
1.7 KiB
TypeScript

import { HStack, Stack } from "@styled-system/jsx";
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 { getI18n } from "@/i18n/server";
import { stack } from "@styled-system/patterns";
import { styled } from "@styled-system/jsx";
import { submitReservationFormAction } from "@/actions/reservation";
export default async function ReservationForm() {
const t = await getI18n();
return (
<styled.form action={submitReservationFormAction} className={stack()}>
<Field.Root id="name">
<Field.Label>{t("contact.name")}</Field.Label>
<Field.Input name="name" placeholder={t("contact.name")} />
</Field.Root>
<Field.Root id="email">
<Field.Label>{t("general.email")}</Field.Label>
<Field.Input name="email" placeholder={t("general.email")} asChild>
<Input type="email" />
</Field.Input>
</Field.Root>
<Field.Root id="phoneNumber">
<Field.Label>{t("general.phoneNumber")}</Field.Label>
<Field.Input name="phoneNumber" placeholder={t("general.phoneNumber")} />
</Field.Root>
<DateTimePicker />
<Field.Root id="guests">
<Field.Label>{t("reservation.guests")}</Field.Label>
<Field.Input name="guests" placeholder={t("reservation.guests")} />
</Field.Root>
<Field.Root id="message">
<Field.Label>{t("contact.message")}</Field.Label>
<Field.Textarea name="message" placeholder={t("contact.message")} />
</Field.Root>
<HStack justify="end">
<Button type="submit">{t("general.submit")}</Button>
</HStack>
</styled.form>
);
}