Untitled
unknown
plain_text
a year ago
54 kB
2
Indexable
Never
'use client';
import AccordionItem from '@/app/components/AccordionItem';
import { Field, FieldArray } from 'formik';
import { useState } from 'react';
import { BsImage } from 'react-icons/bs';
import Image from 'next/image';
import { useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
const validImageMimeTypes = ['image/jpeg', 'image/png', 'image/gif'];
export default function WebQrDesignForm({ values, setFieldValue, handleChange }) {
// Handle Logo
const [file, setFile] = useState(null);
const onDrop = useCallback(acceptedFiles => {
if (acceptedFiles?.length) {
const selectedFile = acceptedFiles[0];
const fileWithPreview = Object.assign(selectedFile, { preview: URL.createObjectURL(selectedFile) });
setFile(fileWithPreview);
setFieldValue('image', fileWithPreview.preview);
}
// Do something with the file
}, []);
const { getRootProps, getInputProps, isDragActive } = useDropzone({
onDrop,
accept: validImageMimeTypes.join(','),
maxFiles: 1,
maxSize: 1024 * 1000
});
const removeFile = name => {
setFile(null);
setFieldValue('image', null);
};
// Handle logo end
const handleToggleDotGradient = (values, setFieldValue) => {
const hasGradient = !!values.dotsOptions.gradient;
if (hasGradient) {
// Remove gradient
setFieldValue(`dotsOptions.gradient`, null);
} else {
// Add gradient
setFieldValue(`dotsOptions.gradient`, {
type: 'linear',
rotation: 0,
colorStops: [
{ offset: 0, color: '#000000' },
{ offset: 1, color: '#000000' }
]
});
}
};
const handleToggleBgGradient = (values, setFieldValue) => {
const hasGradient = !!values.backgroundOptions.gradient;
if (hasGradient) {
// Remove gradient
setFieldValue(`backgroundOptions.gradient`, null);
} else {
// Add gradient
setFieldValue(`backgroundOptions.gradient`, {
type: 'linear',
rotation: 0,
colorStops: [
{ offset: 0, color: '#ffffff' },
{ offset: 1, color: '#ffffff' }
]
});
}
};
const handleToggleCornerGradient = (values, setFieldValue) => {
const hasGradient = !!values.cornersSquareOptions.gradient;
if (hasGradient) {
// Remove gradient
setFieldValue(`cornersSquareOptions.gradient`, null);
} else {
// Add gradient
setFieldValue(`cornersSquareOptions.gradient`, {
type: 'linear',
rotation: 0,
colorStops: [
{ offset: 0, color: '#000000' },
{ offset: 1, color: '#000000' }
]
});
}
};
const handleToggleCornerDotGradient = (values, setFieldValue) => {
const hasGradient = !!values.cornersDotOptions.gradient;
if (hasGradient) {
// Remove gradient
setFieldValue(`cornersDotOptions.gradient`, null);
} else {
// Add gradient
setFieldValue(`cornersDotOptions.gradient`, {
type: 'linear',
rotation: 0,
colorStops: [
{ offset: 0, color: '#000000' },
{ offset: 1, color: '#000000' }
]
});
}
};
// const handleToggleGradient = (optionPath, values, setFieldValue) => {
// const hasGradient = !!get(values, optionPath + '.gradient');
// if (hasGradient) {
// setFieldValue(optionPath + '.gradient', null);
// } else {
// setFieldValue(optionPath + '.gradient', {
// type: 'linear',
// rotation: 0,
// colorStops: [
// { offset: 0, color: '#000000' },
// { offset: 1, color: '#000000' }
// ]
// });
// }
// };
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'
checked={!!values.dotsOptions.gradient}
onChange={() => handleToggleDotGradient(values, setFieldValue)}
/>
<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>
{!values.dotsOptions.gradient ? (
<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>
<div
className='tooltip tooltip-info tooltip-right'
data-tip={values.dotsOptions.gradient.rotation}
>
<Field
type='range'
className='w-72 cursor-pointer py-0.5'
name='dotsOptions.gradient.rotation'
min='0'
max='360'
/>
</div>
</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'
checked={!!values.backgroundOptions.gradient}
onChange={() => handleToggleBgGradient(values, setFieldValue)}
/>
<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>
{!values.backgroundOptions.gradient ? (
<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>
<div
className='tooltip tooltip-info tooltip-right'
data-tip={values.backgroundOptions.gradient.rotation}
>
<Field
type='range'
className='w-72 cursor-pointer py-0.5'
name='backgroundOptions.gradient.rotation'
min='0'
max='360'
/>
</div>
</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='mb-10 flex items-center'>
<label className='mr-4 h-8 w-8 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'>
<svg class='MuiSvgIcon-root' focusable='false' viewBox='0 0 24 24' aria-hidden='true'>
<path fill='#000000' d='M0,0V24H24V0ZM20,20H4V4H20Z'></path>
<rect fill='#000000' x='8' y='8' width='8' height='8'></rect>
</svg>
</div>
</label>
<label className='mr-4 h-8 w-8 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'>
<svg class='MuiSvgIcon-root' focusable='false' viewBox='0 0 24 24' aria-hidden='true'>
<path fill='#000000' d='M0,0V24H24V0ZM20,20H4V4H20Z'></path>
<circle fill='#000000' cx='12' cy='12' r='4'></circle>
</svg>
</div>
</label>
<label className='mr-4 h-8 w-8 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'>
<svg class='MuiSvgIcon-root' focusable='false' viewBox='0 0 24 24' aria-hidden='true'>
<path
fill='#000000'
d='M18,0H6A6,6,0,0,0,0,6V18a6,6,0,0,0,6,6H18a6,6,0,0,0,6-6V6A6,6,0,0,0,18,0Zm2,18a2,2,0,0,1-2,2H6a2,2,0,0,1-2-2V6A2,2,0,0,1,6,4H18a2,2,0,0,1,2,2Z'
></path>
<rect fill='#000000' x='8' y='8' width='8' height='8'></rect>
</svg>
</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'
checked={!!values.cornersDotOptions.gradient}
onChange={() => handleToggleCornerDotGradient(values, setFieldValue)}
/>
<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>
{!values.cornersDotOptions.gradient ? (
<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>
<div
className='tooltip tooltip-info tooltip-right'
data-tip={values.cornersDotOptions.gradient.rotation}
>
<Field
type='range'
className='w-72 cursor-pointer py-0.5'
name='cornersDotOptions.gradient.rotation'
min='0'
max='360'
/>
</div>
</div>
</div>
)}{' '}
</>
)}
<h4 className='mt-3 text-[16px] font-medium text-gray-800'>Corners Square styles</h4>
<div className='mb-10 flex items-center'>
<label className='mr-4 h-8 w-8 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'>
<svg class='MuiSvgIcon-root' focusable='false' viewBox='0 0 24 24' aria-hidden='true'>
<path fill='#000000' d='M0,0V24H24V0ZM20,20H4V4H20Z'></path>
<circle fill='#000000' cx='12' cy='12' r='4'></circle>
</svg>
</div>
</label>
<label className='mr-4 h-8 w-8 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'>
<svg class='MuiSvgIcon-root' focusable='false' viewBox='0 0 24 24' aria-hidden='true'>
<path
fill='#000000'
d='M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0Zm0,20a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z'
></path>
<path
fill='#000000'
d='M11,16c-1.657,0-3-1.343-3-3v-2c0-1.657,1.343-3,3-3h2c1.657,0,3,1.343,3,3v2c0,1.657-1.343,3-3,3H11'
></path>
</svg>
</div>
</label>
<label className='mr-4 h-8 w-8 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'>
<svg class='MuiSvgIcon-root' focusable='false' viewBox='0 0 24 24' aria-hidden='true'>
<path fill='#000000' d='M0,0V24H24V0ZM20,20H4V4H20Z'></path>
<rect fill='#000000' x='8' y='8' width='8' height='8'></rect>
</svg>
</div>
</label>
<label className='mr-4 h-8 w-8 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'>
<svg class='MuiSvgIcon-root' focusable='false' viewBox='0 0 24 24' aria-hidden='true'>
<path
fill='#000000'
d='M18,0H6A6,6,0,0,0,0,6V18a6,6,0,0,0,6,6H18a6,6,0,0,0,6-6V6A6,6,0,0,0,18,0Zm2,18a2,2,0,0,1-2,2H6a2,2,0,0,1-2-2V6A2,2,0,0,1,6,4H18a2,2,0,0,1,2,2Z'
></path>
<circle fill='#000000' cx='12' cy='12' r='4'></circle>
</svg>
</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'
checked={!!values.cornersSquareOptions.gradient}
onChange={() => handleToggleCornerGradient(values, setFieldValue)}
/>
<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>
{!values.cornersSquareOptions.gradient ? (
<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>
<div
className='tooltip tooltip-info tooltip-right'
data-tip={values.cornersSquareOptions.gradient.rotation}
>
<Field
type='range'
className='w-72 cursor-pointer py-0.5'
name='cornersSquareOptions.gradient.rotation'
min='0'
max='360'
/>
</div>
</div>
</div>
)}{' '}
</>
)}
</div>
</div>
</AccordionItem>
<AccordionItem title='Add Logo'>
<div>
<h4 className='mb-3'>Upload your logo</h4>
<div className='flex items-center justify-start gap-10'>
<div {...getRootProps()}>
<input {...getInputProps()} />
{file ? (
<div>
<Image src={file.preview} alt='' width={100} height={100} />
</div>
) : (
<div className='mt-1 w-fit cursor-pointer rounded-xl border border-gray-200 p-0.5 px-2'>
<BsImage className='text-8xl' />
</div>
)}
</div>
{file && (
<button
type='button'
className='btn btn-error btn-sm rounded-full text-white'
onClick={() => removeFile(file.name)}
>
Delete
</button>
)}
</div>
</div>
</AccordionItem>
</div>
);
}