import clsx from "clsx"; import { useTranslation } from "next-i18next"; import * as React from "react"; import { useForm } from "react-hook-form"; import { requiredString } from "../../utils/form-validation"; import { PollFormProps } from "./types"; export interface PollDetailsData { title: string; location: string; description: string; } export const PollDetailsForm: React.VoidFunctionComponent< PollFormProps<PollDetailsData> > = ({ name, defaultValues, onSubmit, onChange, className }) => { const { t } = useTranslation("app"); const { handleSubmit, register, watch, formState: { errors }, } = useForm<PollDetailsData>({ defaultValues }); React.useEffect(() => { if (onChange) { const subscription = watch(onChange); return () => { subscription.unsubscribe(); }; } }, [onChange, watch]); return ( <form id={name} className={clsx("max-w-full", className)} style={{ width: 500 }} onSubmit={handleSubmit(onSubmit)} > <div className="formField"> <label htmlFor="title">{t("title")}</label> <input type="text" id="title" className={clsx("input w-full", { "input-error": errors.title, })} placeholder={t("titlePlaceholder")} {...register("title", { validate: requiredString })} /> </div> <div className="formField"> <label htmlFor="location">{t("location")}</label> <input type="text" id="location" className="input w-full" placeholder={t("locationPlaceholder")} {...register("location")} /> </div> <div className="formField"> <label htmlFor="description">{t("description")}</label> <textarea id="description" className="input w-full" placeholder={t("descriptionPlaceholder")} rows={5} {...register("description")} /> </div> </form> ); };