Improve mobile experience on the calculator

2026-07-23 04:26:57 +00:00 · 2023-10-02 14:24:25 +02:00
parent 6d48efd3ca
commit 8cb21b1590
4 changed files with 106 additions and 7 deletions
@@ -0,0 +1,94 @@
+import React from "react";
+
+import { RadioGroup } from "@headlessui/react";
+import { get, isNil } from "lodash";
+import { useTranslations } from "next-intl";
+import { Controller, useFormContext } from "react-hook-form";
+import { twMerge } from "tailwind-merge";
+
+import { Field, FieldProps } from "./Field";
+
+export type BaseOption<T = string, D = unknown> = {
+  value: T;
+  label: string | JSX.Element;
+  disabled?: boolean;
+  data?: D;
+};
+
+export type RadioGroupFieldProps<T = string, D = unknown> = FieldProps & {
+  required?: boolean;
+  options: BaseOption<T, D>[];
+};
+
+export const RadioGroupField = <T extends React.Key = string, D = unknown>({
+  name,
+  className,
+  labelClassName,
+  childrenWrapperClassName,
+  label,
+  hideErrorMessage,
+  required,
+
+  options,
+}: RadioGroupFieldProps<T, D>) => {
+  const t = useTranslations("App");
+  const form = useFormContext();
+
+  const {
+    formState: { errors },
+  } = form;
+
+  const hasError = !!get(errors, name)?.message;
+
+  const valueToOption = (value: T): BaseOption<T, D> =>
+    options.find((o) => o.value === value) ?? { value, label: "" };
+
+  return (
+    <Field
+      {...{
+        name,
+        className,
+        label,
+        labelClassName,
+        childrenWrapperClassName,
+        hideErrorMessage,
+        required,
+      }}
+    >
+      <Controller
+        name={name}
+        control={form.control}
+        render={({ field: { onChange, value } }) => {
+          const optionValue = isNil(value) ? null : valueToOption(value);
+
+          return (
+            <RadioGroup
+              value={value}
+              onChange={onChange}
+              className="flex w-full justify-stretch gap-2"
+            >
+              {options.map((option) => (
+                <RadioGroup.Option
+                  key={option.value}
+                  value={option.value}
+                  className={({ checked }) =>
+                    twMerge(
+                      "flex  flex-1 cursor-pointer items-center justify-center rounded-lg border px-5 py-3 text-center text-sm font-medium focus:outline-none",
+                      "border-gray-300 bg-gray-50 text-gray-900",
+                      "dark:border-gray-600 dark:bg-gray-700 dark:text-white",
+                      checked &&
+                        "border-primary text-primary dark:border-primary dark:text-primary",
+                    )
+                  }
+                  disabled={option.disabled}
+                >
+                  <RadioGroup.Label as="span">{option.label}</RadioGroup.Label>
+                </RadioGroup.Option>
+              ))}
+            </RadioGroup>
+          );
+        }}
+      />
+    </Field>
+  );
+};
@@ -87,7 +87,7 @@ export const TextField = (
                disabled={disabled}
                className={twMerge(
                  "flex w-full content-center rounded-lg border p-3 text-sm",
-                  "border-gray-300 bg-gray-50  text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500",
+                  "border-gray-300 bg-gray-50 text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500",
                  "dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500",
                  hasError && "!border-orange-700 focus:!border-orange-700",
                  disabled && "dark:bg-gray-50",