Untitled
unknown
plain_text
a year ago
45 kB
2
Indexable
Never
'use client'; import AccordionItem from '@/app/components/AccordionItem'; import { Field, FieldArray } from 'formik'; import { useState } from 'react'; export default function WebQrDesignForm({ values, setFieldValue, setInitialValues, initialValues, handleChange }) { const [backgroundGradient, setBackgroundGradient] = useState(false); const [dotGradient, setDotGradient] = useState(false); const [cornerGradient, setCornerGradient] = useState(false); const [cornerSquareGradient, setCornerSquareGradient] = useState(false); return ( <div className='col-span-3 px-5 lg:col-span-2'> <h4 className='mb-5 text-2xl font-bold'>Design the QR</h4> <AccordionItem title='Frame'> <svg class='MuiSvgIcon-root' focusable='false' viewBox='0 0 80 80' aria-hidden='true' > <g fill='#000000'> <path d='M48,32h16v32h-16v-8h8v-8h-8v-8h-8v-8h-8v-8h8v-8h8v16Zm8-16v8h8v-8h-8Zm-24,8v-8H16v16h8v-8h8Zm16,24v8h-8v8H16v-24h8v-8h8v8h8v8h8Zm-16,0h-8v8h8v-8Z'></path> </g> </svg> </AccordionItem> <AccordionItem title='QR code style' isActive> <div> <div className='rounded-md bg-white p-2 shadow lg:p-5'> <div className='mb-4'> <h4 className='text-[16px] font-medium text-gray-800'> QR Dot Styles </h4> <div className='flex items-center'> <label className='mr-4 h-24 w-24 cursor-pointer'> <Field type='radio' name='dotsOptions.type' value='square' className='mr-2 opacity-0' /> <div className='rounded-md border border-gray-300 p-1'> <svg class='MuiSvgIcon-root' focusable='false' viewBox='0 0 80 80' aria-hidden='true' > <g fill={values.dotsOptions.color}> <path d='M48,32h16v32h-16v-8h8v-8h-8v-8h-8v-8h-8v-8h8v-8h8v16Zm8-16v8h8v-8h-8Zm-24,8v-8H16v16h8v-8h8Zm16,24v8h-8v8H16v-24h8v-8h8v8h8v8h8Zm-16,0h-8v8h8v-8Z'></path> </g> </svg> </div> </label> <label className='mr-4 h-24 w-24 cursor-pointer'> <Field type='radio' name='dotsOptions.type' value='rounded' className='mr-2 opacity-0' /> <div className='rounded-md border border-gray-300 p-1'> <svg class='MuiSvgIcon-root' focusable='false' viewBox='0 0 80 80' aria-hidden='true' > <g fill={values.dotsOptions.color}> <path d='M58,16h4c1.1,0,2,.9,2,2v4c0,1.1-.9,2-2,2h-4c-1.1,0-2-.9-2-2v-4c0-1.1,.9-2,2-2ZM18,32h4c1.1,0,2-.9,2-2v-6h6c1.1,0,2-.9,2-2v-4c0-1.1-.9-2-2-2h-12c-1.1,0-2,.9-2,2v12c0,1.1,.9,2,2,2Zm30,18c0-1.1-.9-2-2-2h-6v-6c0-1.1-.9-2-2-2h-6v-6c0-1.1-.9-2-2-2h-4c-1.1,0-2,.9-2,2v6h-6c-1.1,0-2,.9-2,2v20c0,1.1,.9,2,2,2h20c1.1,0,2-.9,2-2v-6h6c1.1,0,2-.9,2-2v-4Zm-16,6h-8v-8h8v8Zm30-24h-14v-14c0-1.1-.9-2-2-2h-4c-1.1,0-2,.9-2,2v6h-6c-1.1,0-2,.9-2,2v4c0,1.1,.9,2,2,2h6v6c0,1.1,.9,2,2,2h6v6c0,1.1,.9,2,2,2h6v8h-6c-1.1,0-2,.9-2,2v4c0,1.1,.9,2,2,2h12c1.1,0,2-.9,2-2v-28c0-1.1-.9-2-2-2Z'></path> </g> </svg> </div> </label> <label className='mr-4 h-24 w-24 cursor-pointer'> <Field type='radio' name='dotsOptions.type' value='extra-rounded' className='mr-2 opacity-0' /> <div className='rounded-md border border-gray-300 p-1'> <svg class='MuiSvgIcon-root' focusable='false' viewBox='0 0 80 80' aria-hidden='true' > <g fill={values.dotsOptions.color}> <path d='M59,16h2c1.66,0,3,1.34,3,3v2c0,1.66-1.34,3-3,3h-2c-1.66,0-3-1.34-3-3v-2c0-1.66,1.34-3,3-3Zm1,16h-12v-12c0-2.21-1.79-4-4-4s-4,1.79-4,4v4h-4c-2.21,0-4,1.79-4,4s1.79,4,4,4h4v4c0,2.21,1.79,4,4,4h4v4c0,2.21,1.79,4,4,4h4v8h-4c-2.21,0-4,1.79-4,4s1.79,4,4,4h8c2.21,0,4-1.79,4-4v-24c0-2.21-1.79-4-4-4Zm-40,0c2.21,0,4-1.79,4-4v-4h4c2.21,0,4-1.79,4-4s-1.79-4-4-4h-8c-2.21,0-4,1.79-4,4v8c0,2.21,1.79,4,4,4Zm24,16h-4v-4c0-2.21-1.79-4-4-4h-4v-4c0-2.21-1.79-4-4-4s-4,1.79-4,4v4h-4c-2.21,0-4,1.79-4,4v16c0,2.21,1.79,4,4,4h16c2.21,0,4-1.79,4-4v-4h4c2.21,0,4-1.79,4-4s-1.79-4-4-4Zm-12,8h-8v-8h8v8Z'></path> </g> </svg> </div> </label> <label className='mr-4 h-24 w-24 cursor-pointer'> <Field type='radio' name='dotsOptions.type' value='classy' className='mr-2 opacity-0' /> <div className='rounded-md border border-gray-300 p-1'> <svg class='MuiSvgIcon-root' focusable='false' viewBox='0 0 80 80' aria-hidden='true' > <g fill={values.dotsOptions.color}> <path d='M58,16h4c1.1,0,2,.9,2,2v4c0,1.1-.9,2-2,2h-4c-1.1,0-2-.9-2-2v-4c0-1.1,.9-2,2-2ZM18,32h4c1.1,0,2-.9,2-2v-6h6c1.1,0,2-.9,2-2v-4c0-1.1-.9-2-2-2h-12c-1.1,0-2,.9-2,2v12c0,1.1,.9,2,2,2Zm30,18c0-1.1-.9-2-2-2h-6v-6c0-1.1-.9-2-2-2h-6v-6c0-1.1-.9-2-2-2h-4c-1.1,0-2,.9-2,2v6h-6c-1.1,0-2,.9-2,2v20c0,1.1,.9,2,2,2h20c1.1,0,2-.9,2-2v-6h6c1.1,0,2-.9,2-2v-4Zm-16,6h-8v-8h8v8Zm30-24h-14v-14c0-1.1-.9-2-2-2h-4c-1.1,0-2,.9-2,2v6h-6c-1.1,0-2,.9-2,2v4c0,1.1,.9,2,2,2h6v6c0,1.1,.9,2,2,2h6v6c0,1.1,.9,2,2,2h6v8h-6c-1.1,0-2,.9-2,2v4c0,1.1,.9,2,2,2h12c1.1,0,2-.9,2-2v-28c0-1.1-.9-2-2-2Z'></path> </g> </svg> </div> </label> <label className='mr-4 h-24 w-24 cursor-pointer'> <Field type='radio' name='dotsOptions.type' value='classy-rounded' className='mr-2 opacity-0' /> <div className='rounded-md border border-gray-300 p-1'> <svg class='MuiSvgIcon-root' focusable='false' viewBox='0 0 80 80' aria-hidden='true' > <g fill={values.dotsOptions.color}> <path d='M47.91,32c.09-.33,.09-16,.09-16h-2c-3.31,0-6,2.69-6,6v2h-2c-3.31,0-6,2.69-6,6v2h8v8h8v8h8v8h-2c-3.31,0-6,2.69-6,6v2h10c3.31,0,6-2.69,6-6h0v-26h-16.09Zm14.09-16c-3.31,0-6,2.69-6,6v2h2c3.31,0,6-2.69,6-6v-2h-2ZM24,26v-2h2c3.31,0,6-2.69,6-6v-2h-10c-3.31,0-6,2.69-6,6v10h2c3.31,0,6-2.69,6-6Zm16,14h-8v-8h-2c-3.31,0-6,2.69-6,6v2h-2c-3.31,0-6,2.69-6,6v18h18c3.31,0,6-2.69,6-6h0v-2h2c3.31,0,6-2.69,6-6v-2h-8v-8Zm-16,16v-8h8v8h-8Z'></path> </g> </svg> </div> </label> <label className='mr-4 h-24 w-24 cursor-pointer'> <Field type='radio' name='dotsOptions.type' value='dots' className='mr-2 opacity-0' /> <div className='rounded-md border border-gray-300 p-1'> <svg class='MuiSvgIcon-root' focusable='false' viewBox='0 0 80 80' aria-hidden='true' > <g fill={values.dotsOptions.color}> <path d='M28,32c2.21,0,4,1.79,4,4s-1.79,4-4,4-4-1.79-4-4,1.79-4,4-4Zm8,8c2.21,0,4,1.79,4,4s-1.79,4-4,4-4-1.79-4-4,1.79-4,4-4Zm-8,0c2.21,0,4,1.79,4,4s-1.79,4-4,4-4-1.79-4-4,1.79-4,4-4Zm-8,0c2.21,0,4,1.79,4,4s-1.79,4-4,4-4-1.79-4-4,1.79-4,4-4Zm16,16c2.21,0,4,1.79,4,4s-1.79,4-4,4-4-1.79-4-4,1.79-4,4-4Zm-8,0c2.21,0,4,1.79,4,4s-1.79,4-4,4-4-1.79-4-4,1.79-4,4-4Zm-8,0c2.21,0,4,1.79,4,4s-1.79,4-4,4-4-1.79-4-4,1.79-4,4-4Zm16-8c2.21,0,4,1.79,4,4s-1.79,4-4,4-4-1.79-4-4,1.79-4,4-4Zm-16,0c2.21,0,4,1.79,4,4s-1.79,4-4,4-4-1.79-4-4,1.79-4,4-4Zm16-24c2.21,0,4,1.79,4,4s-1.79,4-4,4-4-1.79-4-4,1.79-4,4-4Zm8-8c2.21,0,4,1.79,4,4s-1.79,4-4,4-4-1.79-4-4,1.79-4,4-4Zm0,8c2.21,0,4,1.79,4,4s-1.79,4-4,4-4-1.79-4-4,1.79-4,4-4Zm0,8c2.21,0,4,1.79,4,4s-1.79,4-4,4-4-1.79-4-4,1.79-4,4-4Zm8,0c2.21,0,4,1.79,4,4s-1.79,4-4,4-4-1.79-4-4,1.79-4,4-4Zm8-16c2.21,0,4,1.79,4,4s-1.79,4-4,4-4-1.79-4-4,1.79-4,4-4Zm0,16c2.21,0,4,1.79,4,4s-1.79,4-4,4-4-1.79-4-4,1.79-4,4-4Zm0,8c2.21,0,4,1.79,4,4s-1.79,4-4,4-4-1.79-4-4,1.79-4,4-4ZM20,24c2.21,0,4,1.79,4,4s-1.79,4-4,4-4-1.79-4-4,1.79-4,4-4Zm0-8c2.21,0,4,1.79,4,4s-1.79,4-4,4-4-1.79-4-4,1.79-4,4-4Zm8,0c2.21,0,4,1.79,4,4s-1.79,4-4,4-4-1.79-4-4,1.79-4,4-4Zm16,32c2.21,0,4,1.79,4,4s-1.79,4-4,4-4-1.79-4-4,1.79-4,4-4Zm8-8c2.21,0,4,1.79,4,4s-1.79,4-4,4-4-1.79-4-4,1.79-4,4-4Zm8,8c2.21,0,4,1.79,4,4s-1.79,4-4,4-4-1.79-4-4,1.79-4,4-4Zm0,8c2.21,0,4,1.79,4,4s-1.79,4-4,4-4-1.79-4-4,1.79-4,4-4Zm-8,0c2.21,0,4,1.79,4,4s-1.79,4-4,4-4-1.79-4-4,1.79-4,4-4Z'></path> </g> </svg> </div> </label> </div> </div> <div className='mt-5'> <h4 className='rounded-lg bg-gray-100 px-2 py-4 text-gray-600 shadow-sm'> <span className='mr-2 font-bold text-orange-400'> Remember! </span> For the optimal reading of the QR code, you need to use high contrast colors. We recommend selecting a light and a dark color for your QR code. </h4> </div> <h4 className='mt-3 text-[14px] font-medium text-gray-800'> Dot Color </h4> <div className='mt-4 flex items-center justify-start gap-4'> <label className='relative h-6 w-12'> <input type='checkbox' className='custom_switch peer absolute z-10 h-full w-full cursor-pointer opacity-0' id='custom_switch_checkbox1' value={dotGradient} onClick={() => setDotGradient(!dotGradient)} /> <span className='outline_checkbox block h-full rounded-full border-2 border-[#ebedf2] before:absolute before:bottom-1 before:left-1 before:h-4 before:w-4 before:rounded-full before:bg-[#ebedf2] before:transition-all before:duration-300 peer-checked:border-primary peer-checked:before:left-7 peer-checked:before:bg-primary dark:border-white-dark dark:before:bg-white-dark'></span> </label> <h4 className='text-[14px] font-semibold text-gray-800'> Use gradient </h4> </div> {!dotGradient ? ( <div className='mt-3 flex w-fit items-center gap-4 rounded-lg border border-gray-300 px-2 py-1'> <Field type='text' name='dotsOptions.color' placeholder='Offset' className='w-24 rounded-md px-2 py-1 text-[14px] text-gray-800 focus:outline-none' onChange={handleChange} /> <Field type='color' id='dotsOptions.color' name='dotsOptions.color' className='h-8 w-8 rounded-lg' onChange={handleChange} /> </div> ) : ( <> <div className='mt-5 flex items-center gap-5'> <div className='mb-3'> <label htmlFor='dotsOptions.gradient.colorStops' className='mb-2 block text-sm font-medium text-gray-800' > Gradient type </label> <Field as='select' className='w-32 rounded-lg border border-gray-300 px-2 py-2 text-base text-gray-800 focus:outline-none' name='dotsOptions.gradient.type' > <option value='linear'>Linear</option> <option value='radial'>Radial</option> </Field> </div> <FieldArray name='dotsOptions.gradient.colorStops'> {arrayHelpers => ( <div className='flex gap-5'> {arrayHelpers.form.values?.dotsOptions?.gradient?.colorStops.map( (stop, index) => ( <div key={index} className='mb-2 flex items-center' > <Field type='number' name={`dotsOptions.gradient.colorStops[${index}].offset`} placeholder='Offset' className='hidden' /> <div> <h4 className='ml-2 text-[14px] font-medium text-gray-800'> Color {index + 1} </h4> <div className='mt-1 flex w-fit items-center gap-4 rounded-lg border border-gray-300 px-2 py-1'> <Field type='text' name={`dotsOptions.gradient.colorStops[${index}].color`} placeholder='Offset' className='w-24 rounded-md px-2 py-1 text-[14px] text-gray-800 focus:outline-none' /> <Field type='color' name={`dotsOptions.gradient.colorStops[${index}].color`} placeholder='Color' className='h-8 w-8' /> </div> </div> </div> ) )} </div> )} </FieldArray> </div> {values?.dotsOptions?.gradient?.type === 'linear' && ( <div className='mb-4'> <div> <h4>Rotation</h4> <span className='flex'> <Field type='number' id='dotsOptions.gradient.rotation' name='dotsOptions.gradient.rotation' className='w-20 border-0 px-2 py-1' /> </span> <Field type='range' className='w-72 cursor-pointer py-0.5' name='dotsOptions.gradient.rotation' min='0' max='360' /> </div> </div> )}{' '} </> )} <h4 className='mt-3 text-[14px] font-medium text-gray-800'> Background Color </h4> <div className='mt-4 flex items-center justify-start gap-4'> <label className='relative h-6 w-12'> <input type='checkbox' className='custom_switch peer absolute z-10 h-full w-full cursor-pointer opacity-0' id='custom_switch_checkbox1' value={backgroundGradient} onClick={() => setBackgroundGradient(!backgroundGradient) } /> <span className='outline_checkbox block h-full rounded-full border-2 border-[#ebedf2] before:absolute before:bottom-1 before:left-1 before:h-4 before:w-4 before:rounded-full before:bg-[#ebedf2] before:transition-all before:duration-300 peer-checked:border-primary peer-checked:before:left-7 peer-checked:before:bg-primary dark:border-white-dark dark:before:bg-white-dark'></span> </label> <h4 className='text-[14px] font-semibold text-gray-800'> Use gradient </h4> </div> {!backgroundGradient ? ( <div className='mt-3 flex w-fit items-center gap-4 rounded-lg border border-gray-300 px-2 py-1'> <Field type='text' name='backgroundOptions.color' placeholder='Offset' className='w-24 rounded-md px-2 py-1 text-[14px] text-gray-800 focus:outline-none' onChange={handleChange} /> <Field type='color' id='backgroundOptions.color' name='backgroundOptions.color' className='h-8 w-8' onChange={handleChange} /> </div> ) : ( <> <div className='mt-5 flex items-center gap-5'> <div className='mb-3'> <label htmlFor='backgroundOptions.gradient.colorStops' className='mb-2 block text-sm font-medium text-gray-800' > Gradient type </label> <Field as='select' className='w-32 rounded-lg border border-gray-300 px-2 py-2 text-base text-gray-800 focus:outline-none' name='backgroundOptions.gradient.type' > <option value='linear'>Linear</option> <option value='radial'>Radial</option> </Field> </div> <FieldArray name='backgroundOptions.gradient.colorStops'> {arrayHelpers => ( <div className='flex gap-5'> {arrayHelpers.form.values?.backgroundOptions?.gradient?.colorStops.map( (stop, index) => ( <div key={index} className='mb-2 flex items-center' > <Field type='number' name={`backgroundOptions.gradient.colorStops[${index}].offset`} placeholder='Offset' className='hidden' /> <div> <h4 className='ml-2 text-[14px] font-medium text-gray-800'> Color {index + 1} </h4> <div className='mt-1 flex w-fit items-center gap-4 rounded-lg border border-gray-300 px-2 py-1'> <Field type='text' name={`backgroundOptions.gradient.colorStops[${index}].color`} placeholder='Offset' className='w-24 rounded-md px-2 py-1 text-[14px] text-gray-800 focus:outline-none' /> <Field type='color' name={`backgroundOptions.gradient.colorStops[${index}].color`} placeholder='Color' className='h-8 w-8' /> </div> </div> </div> ) )} </div> )} </FieldArray> </div> {values?.backgroundOptions?.gradient?.type === 'linear' && ( <div className='mb-4'> <div> <h4>Rotation</h4> <span className='flex'> <Field type='number' id='backgroundOptions.gradient.rotation' name='backgroundOptions.gradient.rotation' className='w-20 border-0 px-2 py-1' /> </span> <Field type='range' className='w-72 cursor-pointer py-0.5' name='backgroundOptions.gradient.rotation' min='0' max='360' /> </div> </div> )}{' '} </> )} </div> <div className='mt-3 rounded-md bg-white p-2 shadow lg:p-5'> <h4 className='text-[16px] font-medium text-gray-800'> QR Corners Styles </h4> <div className='flex items-center'> <label className='mr-4 h-24 w-24 cursor-pointer'> <Field type='radio' name='cornersDotOptions.type' value='none' className='mr-2 opacity-0' /> <div className='rounded-md border border-gray-300 p-1'> None </div> </label> <label className='mr-4 h-24 w-24 cursor-pointer'> <Field type='radio' name='cornersDotOptions.type' value='dot' className='mr-2 opacity-0' /> <div className='rounded-md border border-gray-300 p-1'> Dot </div> </label> <label className='mr-4 h-24 w-24 cursor-pointer'> <Field type='radio' name='cornersDotOptions.type' value='square' className='mr-2 opacity-0' /> <div className='rounded-md border border-gray-300 p-1'> Square </div> </label> </div> <div className='mt-4 flex items-center justify-start gap-4'> <label className='relative h-6 w-12'> <input type='checkbox' className='custom_switch peer absolute z-10 h-full w-full cursor-pointer opacity-0' id='custom_switch_checkbox1' value={cornerGradient} onClick={() => setCornerGradient(!cornerGradient)} /> <span className='outline_checkbox block h-full rounded-full border-2 border-[#ebedf2] before:absolute before:bottom-1 before:left-1 before:h-4 before:w-4 before:rounded-full before:bg-[#ebedf2] before:transition-all before:duration-300 peer-checked:border-primary peer-checked:before:left-7 peer-checked:before:bg-primary dark:border-white-dark dark:before:bg-white-dark'></span> </label> <h4 className='text-[14px] font-semibold text-gray-800'> Use gradient </h4> </div> {!cornerGradient ? ( <div className='mt-3 flex w-fit items-center gap-4 rounded-lg border border-gray-300 px-2 py-1'> <Field type='text' name='cornersDotOptions.color' placeholder='Offset' className='w-24 rounded-md px-2 py-1 text-[14px] text-gray-800 focus:outline-none' onChange={handleChange} /> <Field type='color' id='cornersDotOptions.color' name='cornersDotOptions.color' className='h-8 w-8' onChange={handleChange} /> </div> ) : ( <> <div className='mt-5 flex items-center gap-5'> <div className='mb-3'> <label htmlFor='cornersDotOptions.gradient.colorStops' className='mb-2 block text-sm font-medium text-gray-800' > Gradient type </label> <Field as='select' className='w-32 rounded-lg border border-gray-300 px-2 py-2 text-base text-gray-800 focus:outline-none' name='cornersDotOptions.gradient.type' > <option value='linear'>Linear</option> <option value='radial'>Radial</option> </Field> </div> <FieldArray name='cornersDotOptions.gradient.colorStops'> {arrayHelpers => ( <div className='flex gap-5'> {arrayHelpers.form.values?.cornersDotOptions?.gradient?.colorStops.map( (stop, index) => ( <div key={index} className='mb-2 flex items-center' > <Field type='number' name={`cornersDotOptions.gradient.colorStops[${index}].offset`} placeholder='Offset' className='hidden' /> <div> <h4 className='ml-2 text-[14px] font-medium text-gray-800'> Color {index + 1} </h4> <div className='mt-1 flex w-fit items-center gap-4 rounded-lg border border-gray-300 px-2 py-1'> <Field type='text' name={`cornersDotOptions.gradient.colorStops[${index}].color`} placeholder='Offset' className='w-24 rounded-md px-2 py-1 text-[14px] text-gray-800 focus:outline-none' /> <Field type='color' name={`cornersDotOptions.gradient.colorStops[${index}].color`} placeholder='Color' className='h-8 w-8' /> </div> </div> </div> ) )} </div> )} </FieldArray> </div> {values?.cornersDotOptions?.gradient?.type === 'linear' && ( <div className='mb-4'> <div> <h4>Rotation</h4> <span className='flex'> <Field type='number' id='cornersDotOptions.gradient.rotation' name='cornersDotOptions.gradient.rotation' className='w-20 border-0 px-2 py-1' /> </span> <Field type='range' className='w-72 cursor-pointer py-0.5' name='cornersDotOptions.gradient.rotation' min='0' max='360' /> </div> </div> )}{' '} </> )} <h4 className='mt-3 text-[16px] font-medium text-gray-800'> Corners Square styles </h4> <div className='flex items-center'> <label className='mr-4 h-24 w-24 cursor-pointer'> <Field type='radio' name='cornersSquareOptions.type' value='none' className='mr-2 opacity-0' /> <div className='rounded-md border border-gray-300 p-1'> None </div> </label> <label className='mr-4 h-24 w-24 cursor-pointer'> <Field type='radio' name='cornersSquareOptions.type' value='dot' className='mr-2 opacity-0' /> <div className='rounded-md border border-gray-300 p-1'> Dot </div> </label> <label className='mr-4 h-24 w-24 cursor-pointer'> <Field type='radio' name='cornersSquareOptions.type' value='square' className='mr-2 opacity-0' /> <div className='rounded-md border border-gray-300 p-1'> Square </div> </label> <label className='mr-4 h-24 w-32 cursor-pointer'> <Field type='radio' name='cornersSquareOptions.type' value='extra-rounded' className='mr-2 opacity-0' /> <div className='rounded-md border border-gray-300 p-1'> Extra-rounded </div> </label> </div> <div className='mt-4 flex items-center justify-start gap-4'> <label className='relative h-6 w-12'> <input type='checkbox' className='custom_switch peer absolute z-10 h-full w-full cursor-pointer opacity-0' id='custom_switch_checkbox1' value={cornerSquareGradient} onClick={() => setCornerSquareGradient(!cornerSquareGradient) } /> <span className='outline_checkbox block h-full rounded-full border-2 border-[#ebedf2] before:absolute before:bottom-1 before:left-1 before:h-4 before:w-4 before:rounded-full before:bg-[#ebedf2] before:transition-all before:duration-300 peer-checked:border-primary peer-checked:before:left-7 peer-checked:before:bg-primary dark:border-white-dark dark:before:bg-white-dark'></span> </label> <h4 className='text-[14px] font-semibold text-gray-800'> Use gradient </h4> </div> {!cornerSquareGradient ? ( <div className='mt-3 flex w-fit items-center gap-4 rounded-lg border border-gray-300 px-2 py-1'> <Field type='text' name='cornersSquareOptions.color' placeholder='Offset' className='w-24 rounded-md px-2 py-1 text-[14px] text-gray-800 focus:outline-none' onChange={handleChange} /> <Field type='color' id='cornersSquareOptions.color' name='cornersSquareOptions.color' className='h-8 w-8' onChange={handleChange} /> </div> ) : ( <> <div className='mt-5 flex items-center gap-5'> <div className='mb-3'> <label htmlFor='cornersSquareOptions.gradient.colorStops' className='mb-2 block text-sm font-medium text-gray-800' > Gradient type </label> <Field as='select' className='w-32 rounded-lg border border-gray-300 px-2 py-2 text-base text-gray-800 focus:outline-none' name='cornersSquareOptions.gradient.type' > <option value='linear'>Linear</option> <option value='radial'>Radial</option> </Field> </div> <FieldArray name='cornersSquareOptions.gradient.colorStops'> {arrayHelpers => ( <div className='flex gap-5'> {arrayHelpers.form.values?.cornersSquareOptions?.gradient?.colorStops.map( (stop, index) => ( <div key={index} className='mb-2 flex items-center' > <Field type='number' name={`cornersSquareOptions.gradient.colorStops[${index}].offset`} placeholder='Offset' className='hidden' /> <div> <h4 className='ml-2 text-[14px] font-medium text-gray-800'> Color {index + 1} </h4> <div className='mt-1 flex w-fit items-center gap-4 rounded-lg border border-gray-300 px-2 py-1'> <Field type='text' name={`cornersSquareOptions.gradient.colorStops[${index}].color`} placeholder='Offset' className='w-24 rounded-md px-2 py-1 text-[14px] text-gray-800 focus:outline-none' /> <Field type='color' name={`cornersSquareOptions.gradient.colorStops[${index}].color`} placeholder='Color' className='h-8 w-8' /> </div> </div> </div> ) )} </div> )} </FieldArray> </div> {values?.cornersSquareOptions?.gradient?.type === 'linear' && ( <div className='mb-4'> <div> <h4>Rotation</h4> <span className='flex'> <Field type='number' id='cornersSquareOptions.gradient.rotation' name='cornersSquareOptions.gradient.rotation' className='w-20 border-0 px-2 py-1' /> </span> <Field type='range' className='w-72 cursor-pointer py-0.5' name='cornersSquareOptions.gradient.rotation' min='0' max='360' /> </div> </div> )}{' '} </> )} </div> </div> </AccordionItem> <AccordionItem title='Add Logo'></AccordionItem> </div> ); }