Use tRPC and react-hook-form

2026-07-23 04:26:57 +00:00 · 2023-09-11 10:28:02 +02:00
parent 7111f000e5
commit ac633670ab
42 changed files with 5490 additions and 587 deletions
@@ -0,0 +1,60 @@
+import React from "react";
+
+import { Switch, SwitchProps } from "@headlessui/react";
+import { Controller, useFormContext } from "react-hook-form";
+import { twMerge } from "tailwind-merge";
+
+import { Field, FieldProps } from "./Field";
+
+export const SwitchField = (props: FieldProps & SwitchProps<"button">) => {
+  const {
+    name,
+    label,
+    disabled,
+    className,
+    labelClassName,
+
+    childrenWrapperClassName,
+    hideErrorMessage,
+
+    ...rest
+  } = props;
+  const form = useFormContext();
+
+  return (
+    <Field
+      {...{
+        name,
+        type: "checkbox",
+        label,
+        disabled,
+        className,
+        labelClassName,
+      }}
+    >
+      <div className="flex w-full flex-col">
+        <Controller
+          control={form.control}
+          name={name}
+          render={({ field }) => (
+            <div className="flex h-[40px] items-center">
+              <Switch
+                checked={field.value}
+                onChange={field.onChange}
+                className={twMerge(
+                  "relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none",
+                  "ui-not-checked:bg-neutral-300 ui-not-checked:hover:bg-neutral-400",
+                  "ui-not-checked:dark:bg-neutral-500 ui-not-checked:dark:hover:bg-neutral-600",
+                  "ui-checked:bg-primary-500 ui-checked:hover:bg-primary-600",
+                )}
+                {...rest}
+              >
+                <span className="ui-checked:translate-x-[19px] ui-not-checked:translate-x-[3px] inline-block h-[14px] w-[14px] transform rounded-full bg-white transition-transform" />
+              </Switch>
+            </div>
+          )}
+        />
+      </div>
+    </Field>
+  );
+};