hamid zarghami
136 lines
5.5 KiB
TypeScript
136 lines
5.5 KiB
TypeScript
import { Add } from 'iconsax-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
|
||
onClick={() => setOpen(true)}
|
||
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"
|
||
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>
|
||
|
||
<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>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default BoxNewAccessbility |