modal new fast access
This commit is contained in:
hamid zarghami
@@ -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]"
|
||||
style={{
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="100%"
|
||||
height="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
<>
|
||||
<div
|
||||
onClick={() => setOpen(true)}
|
||||
className="flex-1 flex justify-center items-center h-[160px]"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
zIndex: -1,
|
||||
borderRadius: '22px',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<rect
|
||||
<svg
|
||||
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" />
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
zIndex: -1,
|
||||
borderRadius: '22px',
|
||||
}}
|
||||
>
|
||||
<rect
|
||||
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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -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>دیزاین ,</div>
|
||||
<div>۲۴ دقیقه</div>
|
||||
</div>
|
||||
<div className=' mt-2'>
|
||||
آذر ماه 1403
|
||||
</div>
|
||||
<div className='flex gap-1 mt-2'>
|
||||
<div>دیزاین ,</div>
|
||||
<div>۲۴ دقیقه</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
آذر ماه 1403
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user