v.korobtsev/next-enterprise
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

prettier, lint cleanup

Browse source
This commit is contained in:
Jesus Vasquez 2024-03-03 22:34:43 -05:00
parent f43bcec080
commit 4adcee4af7
9 changed files with 176 additions and 231 deletions
Download patch file Download diff file Expand all files Collapse all files

28
components/Form/ToggleField.tsx
View file

@ -1,18 +1,18 @@
import { useField } from "formik";
import React, { useState } from "react";
import ErrorMessage from "./ErrorMessage";
import RequiredAsterisk from "./RequiredAsterisk";
import * as SwitchPrimitive from "@radix-ui/react-switch";
import * as SwitchPrimitive from "@radix-ui/react-switch"
import { useField } from "formik"
import React, { useState } from "react"
import ErrorMessage from "./ErrorMessage"
import RequiredAsterisk from "./RequiredAsterisk"
const ToggleField = ({
children,
...props
}: {
children: React.ReactNode;
children: React.ReactNode
} & React.InputHTMLAttributes<HTMLInputElement>) => {
const { required, ...restProps } = props;
const [field, meta] = useField({ ...(restProps as { name: string }), type: "checkbox" });
const [checked, setChecked] = useState(false);
const { required, ...restProps } = props
const [field, meta] = useField({ ...(restProps as { name: string }), type: "checkbox" })
const [checked, setChecked] = useState(false)
return (
<div className="">
@ -24,15 +24,15 @@ const ToggleField = ({
className="relative h-[25px] w-[42px] cursor-default rounded-full bg-black shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
checked={checked}
onCheckedChange={(isChecked) => {
setChecked(isChecked);
field.onChange({ target: { name: field.name, value: isChecked } });
setChecked(isChecked)
field.onChange({ target: { name: field.name, value: isChecked } })
}}
>
<SwitchPrimitive.Thumb className="block h-[21px] w-[21px] translate-x-0.5 rounded-full bg-white shadow-[0_2px_2px] shadow-black transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
</SwitchPrimitive.Root>
<ErrorMessage touched={meta.touched} error={meta.error} />
</div>
);
};
)
}
export default ToggleField;
export default ToggleField