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

styling

Browse source
This commit is contained in:
Jesus Vasquez 2024-03-04 23:33:49 -05:00
parent fadaa0fe4a
commit 1e0594a488
11 changed files with 145 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

15
components/Form/ToggleField.tsx
View file

@ -21,25 +21,28 @@ const ToggleField = ({
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-4">
<Separator/>
<label className="flex items-center gap-2">
<label className="flex items-center gap-2 font-bold text-sm leading-tight text-indigo-900">
{children}
<RequiredAsterisk required={required} />
</label>
</div>
<div className="flex gap-3 itens-center">
<SwitchPrimitive.Root
className="relative h-[25px] w-[42px] cursor-default rounded-full bg-blue-950 shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
className="relative h-[25px] w-[42px] cursor-default rounded-full bg-indigo-900 outline-none"
checked={checked}
onCheckedChange={(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.Thumb className="block h-[21px] w-[21px] translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
</SwitchPrimitive.Root>
<span>Toggle ON</span>
<span>|</span>
<span className="flex gap-2 items-center"><FontAwesomeIcon icon={faClock} />Select Tolerance Level</span>
<div className="flex gap-4 items-center text-sm leading-tight">
<span>Toggle ON</span>
<span>|</span>
<span className="flex gap-2 items-center"><FontAwesomeIcon icon={faClock} />Select Tolerance Level</span>
</div>
</div>
<ErrorMessage touched={meta.touched} error={meta.error} />