modal new fast access

src/assets/images/close-circle.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 15L15 5" stroke="#8C90A3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 15L5 5" stroke="#8C90A3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

src/index.css

@@ -68,3 +68,16 @@ textarea::placeholder {
   border-radius: 24px; /* تطابق با rx و ry */
   overflow: hidden; /* برای رفع مشکلات برش */
 }
+
+.modalGlass {
+  background: rgba(0, 0, 0, 0.436);
+  background-blend-mode: multiply;
+
+  backdrop-filter: blur(7px);
+}
+.modalGlass2 {
+  background: rgba(255, 255, 255, 0.502);
+  background-blend-mode: multiply;
+
+  /* backdrop-filter: blur(5px); */
+}

src/langs/fa.json

@@ -72,6 +72,8 @@
     "access": "دسترسی سریع",
     "add_access": "دسترسی سریع تازه ایجاد کنید.",
     "danak_learning": "آموزش داناک",
-    "see_all": "دیدن همه"
+    "see_all": "دیدن همه",
-  }
+    "create_new_access": "ایجاد دسترسی سریع"
+  },
+  "all": "همه"
 }

src/pages/home/components/BoxNewAccessbility.tsx

@@ -1,42 +1,135 @@
 import { Add } from 'iconsax-react'
-import { FC } from 'react'
+import { FC, useState } from 'react'
+import DefaulModal from '../../../components/DefaulModal'
+import { useTranslation } from 'react-i18next'
+import Input from '../../../components/Input'
+import Select from '../../../components/Select'
 
 const BoxNewAccessbility: FC = () => {
+
+    const [open, setOpen] = useState<boolean>(false)
+    const { t } = useTranslation('global')
+
     return (
-        <div
+        <>
-            className="flex-1 flex justify-center items-center h-[160px]"
+            <div
-            style={{
+                onClick={() => setOpen(true)}
-                position: 'relative',
+                className="flex-1 flex justify-center items-center h-[160px]"
-            }}
-        >
-            <svg
-                width="100%"
-                height="100%"
-                xmlns="http://www.w3.org/2000/svg"
                 style={{
-                    position: 'absolute',
+                    position: 'relative',
-                    top: 0,
-                    left: 0,
-                    zIndex: -1,
-                    borderRadius: '22px',
                 }}
             >
-                <rect
+                <svg
                     width="100%"
                     height="100%"
-                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
-                    // rx="22"
+                    style={{
-                    ry="22"
+                        position: 'absolute',
-                    stroke="#8C90A3"
+                        top: 0,
-                    strokeWidth="2"
+                        left: 0,
-                    strokeDasharray="6,14"
+                        zIndex: -1,
-                // strokeDashoffset="25"
+                        borderRadius: '22px',
-                />
+                    }}
-            </svg>
+                >
-            <div style={{ zIndex: 1 }}>
+                    <rect
-                <Add size={38} color="#8C90A3" />
+                        width="100%"
+                        height="100%"
+                        fill="none"
+                        // rx="22"
+                        ry="22"
+                        stroke="#8C90A3"
+                        strokeWidth="2"
+                        strokeDasharray="6,14"
+                    // strokeDashoffset="25"
+                    />
+                </svg>
+                <div style={{ zIndex: 1 }}>
+                    <Add size={38} color="#8C90A3" />
+                </div>
+
+
             </div>
-        </div>
+
+            <DefaulModal
+                open={open}
+                close={() => setOpen(false)}
+                isHeader={true}
+                title_header={t('home.create_new_access')}
+            >
+                <div className='mt-6'>
+                    <div className='flex  items-center gap-6'>
+                        <div className='min-w-[210px]'>
+                            <Input
+                                variant='search'
+                                className='bg-opacity-25 bg-white'
+                            />
+                        </div>
+
+                        <Select
+                            items={[
+                                { value: '1', label: '1' },
+                                { value: '2', label: '2' },
+                                { value: '3', label: '3' },
+                            ]}
+                            placeholder={t('all')}
+                            className='bg-opacity-25 bg-white w-[100px]'
+                        />
+                    </div>
+
+                    <div className='mt-6 flex flex-wrap gap-6'>
+                        <div className='flex-1 min-w-[40%] flex justify-between items-center border-b border-[#8C90A3] border-opacity-30 py-2'>
+                            <div className='flex gap-4'>
+                                <div className='size-10 rounded-xl bg-red-300'></div>
+                                <div>
+                                    <div className='text-sm'>
+                                        دی منو
+                                    </div>
+                                    <div className='text-xs text-description'>
+                                        منو رستوران
+                                    </div>
+                                </div>
+                            </div>
+                            <div>
+                                {/* <input type='checkbox' /> */}
+                            </div>
+                        </div>
+                        <div className='flex-1 min-w-[40%] flex justify-between items-center border-b border-[#8C90A3] border-opacity-30 py-2'>
+                            <div className='flex gap-4'>
+                                <div className='size-10 rounded-xl bg-blue-300'></div>
+                                <div>
+                                    <div className='text-sm'>
+                                        دی منو
+                                    </div>
+                                    <div className='text-xs text-description'>
+                                        منو رستوران
+                                    </div>
+                                </div>
+                            </div>
+                            <div>
+                                {/* <input type='checkbox' /> */}
+                            </div>
+                        </div>
+                        <div className='flex-1 min-w-[40%] flex justify-between items-center border-b border-[#8C90A3] border-opacity-30 py-2'>
+                            <div className='flex gap-4'>
+                                <div className='size-10 rounded-xl bg-green-300'></div>
+                                <div>
+                                    <div className='text-sm'>
+                                        دی منو
+                                    </div>
+                                    <div className='text-xs text-description'>
+                                        منو رستوران
+                                    </div>
+                                </div>
+                            </div>
+                            <div>
+                                {/* <input type='checkbox' /> */}
+                            </div>
+                        </div>
+                        <div className='flex-1 min-w-[40%]'></div>
+                    </div>
+                </div>
+            </DefaulModal>
+        </>
     )
 }
 

src/pages/home/components/DanakLearning.tsx

@@ -21,43 +21,21 @@ const DanakLearning: FC = () => {
             </div>
 
             <div className='mt-7'>
-                <div className='flex gap-3 mt-6'>
+                <div className='flex gap-3'>
                     <div>
                         <img src={CoverImage} alt='danak-learning-1' className='w-36 h-24 object-cover rounded-2xl' />
                     </div>
 
                     <div className='text-xs'>
-                        <div className='leading-5'>
+                        <div>
                             لورم ایپسوم متن ساختگی با تولید سادگی
                         </div>
-                        <div className='text-[10px] text-description'>
+                        <div className='flex gap-1 mt-2'>
-                            <div className='flex gap-1 mt-2'>
+                            <div>دیزاین ,</div>
-                                <div>دیزاین ,</div>
+                            <div>۲۴ دقیقه</div>
-                                <div>۲۴ دقیقه</div>
-                            </div>
-                            <div className=' mt-2'>
-                                آذر ماه 1403
-                            </div>
                         </div>
-                    </div>
+                        <div>
-                </div>
+                            آذر ماه 1403
-                <div className='flex gap-3 mt-6'>
-                    <div>
-                        <img src={CoverImage} alt='danak-learning-1' className='w-36 h-24 object-cover rounded-2xl' />
-                    </div>
-
-                    <div className='text-xs'>
-                        <div className='leading-5'>
-                            لورم ایپسوم متن ساختگی با تولید سادگی
-                        </div>
-                        <div className='text-[10px] text-description'>
-                            <div className='flex gap-1 mt-2'>
-                                <div>دیزاین ,</div>
-                                <div>۲۴ دقیقه</div>
-                            </div>
-                            <div className=' mt-2'>
-                                آذر ماه 1403
-                            </div>
                         </div>
                     </div>
                 </div>

src/router/Main.tsx

@@ -7,11 +7,11 @@ import Home from '../pages/home/Home'
 
 const MainRouter: FC = () => {
     return (
-        <div className='p-4'>
+        <div className='p-4 overflow-hidden'>
             <SideBar />
             <Header />
-            <div className='flex-1 ms-[269px] mt-[66px]'>
+            <div className='flex-1 ms-[269px] mt-[81px]'>
-                <div className='pt-8'>
+                <div className=' overflow-auto h-[calc(100vh-113px)] '>
                     <Routes>
                         <Route path={Pages.dashboard} element={<Home />} />
                     </Routes>