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>
);
}