modal new fast access

src/components/DefaulModal.tsx

@@ -0,0 +1,56 @@
+import { FC, Fragment, ReactNode, useEffect } from 'react'
+import HeaderModal from './HeaderModal'
+
+interface Props {
+    open: boolean,
+    close: () => void,
+    children: ReactNode,
+    isHeader?: boolean,
+    title_header?: string,
+    width?: number
+}
+
+const DefaulModal: FC<Props> = (props: Props) => {
+
+    useEffect(() => {
+        if (props.open) {
+            document.body.style.overflow = 'hidden'
+        } else {
+            document.body.style.overflow = 'auto'
+        }
+    }, [props.open])
+
+
+    return (
+        <Fragment>
+            {
+                props.open && (
+                    <Fragment>
+                        <div style={{ maxWidth: props.width }} className='justify-center items-center flex overflow-x-hidden  overflow-y-auto fixed inset-0 z-[60]  h-auto top-0 bottom-0 m-auto outline-none focus:outline-none max-w-xl mx-auto'>
+                            <div className='relative h-full  flex items-center sm:h-auto w-full my-6 p-2'>
+                                <div className='border-0 h-auto p-5 lg:min-w-full overflow-y-auto rounded-3xl relative flex flex-col w-full modalGlass2  outline-none focus:outline-none'>
+
+
+                                    {
+                                        props.isHeader && props.title_header &&
+                                        <div className='pb-6 border-b border-white border-opacity-20'>
+                                            <HeaderModal close={props.close} label={props.title_header} />
+                                        </div>
+                                    }
+
+                                    {props.children}
+
+
+                                </div>
+                            </div>
+                        </div>
+
+                        <div onClick={props.close} className='fixed modalGlass inset-0 z-50 '></div>
+                    </Fragment>
+                )
+            }
+        </Fragment>
+    )
+}
+
+export default DefaulModal

src/components/HeaderModal.tsx

@@ -0,0 +1,21 @@
+import { FC } from 'react'
+import XIcon from '../assets/images/close-circle.svg'
+
+
+type Props = {
+    label: string,
+    close: () => void,
+}
+
+const HeaderModal: FC<Props> = (props: Props) => {
+    return (
+        <div className='flex justify-between items-center'>
+            <div className='text-sm'>{props.label}</div>
+            <div className='size-7 rounded-full bg-white bg-opacity-35 flex justify-center items-center'>
+                <img src={XIcon} alt='close' className='w-4 h-4' onClick={props.close} />
+            </div>
+        </div>
+    )
+}
+
+export default HeaderModal

src/components/Input.tsx

@@ -21,7 +21,7 @@ const Input: FC<Props> = (props: Props) => {
     const [showPassword, setShowPassword] = useState<boolean>(false)
 
     const inputClass = clx(
-        'w-full h-10 text-black block px-4 text-xs rounded-xl mt-1 border border-border',
+        'w-full h-10 text-black block px-4 text-xs rounded-xl border border-border',
         props.readOnly && 'bg-gray-100',
         props.variant === 'search' && 'bg-[#EEF0F7] border-0 ps-10',
         props.className

src/components/Select.tsx

@@ -0,0 +1,44 @@
+import { FC, SelectHTMLAttributes } from 'react'
+
+export type ItemsSelectType = {
+    value: string,
+    label: string,
+}
+type Props = {
+    className?: string,
+    items: ItemsSelectType[],
+    error_text?: string,
+    placeholder?: string,
+} & SelectHTMLAttributes<HTMLSelectElement>
+
+const Select: FC<Props> = (props: Props) => {
+    return (
+        <div className='w-full relative'>
+            <select {...props} className={`w-full text-black block px-2.5 h-10 text-sm rounded-2.5 bg-gray ${props.className}`}>
+                {
+                    props.placeholder &&
+                    <option value="" disabled selected>{props.placeholder}</option>
+                }
+                {
+                    props.items.map((item) => {
+                        return (
+                            <option key={item.value} value={item.value}>
+                                {item.label}
+                            </option>
+                        )
+                    })
+                }
+            </select>
+            {
+                props.error_text && props.error_text !== '' ?
+                    <div className='text-xs text-right text-red-600 mt-2 mr-2 font-medium'>
+                        {props.error_text}
+                    </div>
+                    : null
+            }
+        </div>
+
+    )
+}
+
+export default Select