First public commit

components/forms/poll-details-form.tsx

@@ -0,0 +1,76 @@
+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>
+  );
+};