manage variant producy

src/components/DatePicker.tsx

@@ -3,7 +3,6 @@ import DatePicker from 'react-multi-date-picker';
 import persian from 'react-date-object/calendars/persian';
 import persian_fa from 'react-date-object/locales/persian_fa';
 import DateObject from 'react-date-object';
-import CalenderIcon from '../assets/images/calendar.svg'
 import { clx } from '../helpers/utils';
 
 type Props = {
@@ -14,7 +13,8 @@ type Props = {
     reset?: boolean;
     isDateTime?: boolean;
     className?: string;
-    label?: string
+    label: string,
+    readOnly?: boolean;
 };
 
 const DatePickerComponent: FC<Props> = (props: Props) => {
@@ -47,13 +47,12 @@ const DatePickerComponent: FC<Props> = (props: Props) => {
 
     return (
         <div className="w-full">
-            {props.label &&
-                <div className='text-sm'>
-                    {props.label}
-                </div>}
+            <div className='text-sm'>
+                {props.label}
+            </div>
             <div className={clx(
-                'relative ',
-                props.label && 'mt-1.5'
+                'relative mt-1.5',
+                props.readOnly && 'readOny'
             )}>
                 <DatePicker
                     placeholder={props.placeholder}
@@ -62,7 +61,8 @@ const DatePickerComponent: FC<Props> = (props: Props) => {
                     calendar={persian}
                     locale={persian_fa}
                     calendarPosition="bottom-right"
-                    className={`rmdp-mobile ${props.className}`}
+                    className={props.className}
+                    readOnly={props.readOnly}
                 />
                 {props.error_text && props.error_text !== '' && (
                     <div className="text-xs text-right text-red-600 mt-2 mr-2 font-medium">
@@ -70,7 +70,7 @@ const DatePickerComponent: FC<Props> = (props: Props) => {
                     </div>
                 )}
 
-                <img src={CalenderIcon} className='absolute top-0 bottom-0 my-auto left-2' />
+                {/* <img src={CalenderIcon} className='absolute top-0 bottom-0 my-auto left-2' /> */}
             </div>
         </div>
     );

src/components/DefaulModal.tsx

@@ -26,8 +26,8 @@ const DefaulModal: FC<Props> = (props: Props) => {
             {
                 props.open && (
                     <Fragment>
-                        <div style={{ maxWidth: props.width }} className='xl:justify-center xl:items-center items-end flex overflow-x-hidden  overflow-hidden fixed inset-0 z-[60]  h-auto top-0 bottom-0 m-auto outline-none focus:outline-none xl:max-w-xl mx-auto'>
-                            <div className='relative xl:h-full h-[80%] bottom-0 left-0  flex xl:items-center sm:h-auto w-full xl:my-6 xl:p-2'>
+                        <div style={{ maxWidth: props.width }} className='xl:justify-center xl:items-center items-end flex overflow-x-hidden  overflow-hidden  fixed inset-0 z-[60]  h-auto top-0 bottom-0 m-auto outline-none focus:outline-none xl:max-w-xl mx-auto'>
+                            <div className='relative xl:h-full h-[80%] bottom-0 left-0 max-h-[80%] top-0 m-auto overflow-hidden  flex xl:items-center sm:h-auto w-full xl:my-6 xl:p-2'>
                                 <div className='border-0 h-auto p-5 lg:min-w-full overflow-y-auto rounded-3xl rounded-b-none xl:rounded-b-3xl relative flex flex-col w-full bg-white  outline-none focus:outline-none'>