modal add new accesbility

This commit is contained in:
hamid zarghami
2025-01-10 11:07:17 +03:30
parent dd73ca7746
commit e2670408fc
2 changed files with 20 additions and 9 deletions
+4 -3
View File
@@ -26,14 +26,15 @@ const DefaulModal: FC<Props> = (props: Props) => {
{ {
props.open && ( props.open && (
<Fragment> <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 style={{ maxWidth: props.width }} className='xl:justify-center xl:items-center items-end 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 xl:max-w-xl mx-auto'>
<div className='relative h-full flex items-center sm:h-auto w-full my-6 p-2'> <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 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'> <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 modalGlass2 outline-none focus:outline-none'>
{ {
props.isHeader && props.title_header && props.isHeader && props.title_header &&
<div className='pb-6 border-b border-white border-opacity-20'> <div className='pb-6 border-b border-white border-opacity-20'>
<div className='h-[5px] w-[200px] mx-auto bg-[#D1D3D7] rounded-full mb-4 xl:hidden'></div>
<HeaderModal close={props.close} label={props.title_header} /> <HeaderModal close={props.close} label={props.title_header} />
</div> </div>
} }
@@ -4,6 +4,7 @@ import DefaulModal from '../../../components/DefaulModal'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import Input from '../../../components/Input' import Input from '../../../components/Input'
import Select from '../../../components/Select' import Select from '../../../components/Select'
import SwitchComponent from '../../../components/Switch'
const BoxNewAccessbility: FC = () => { const BoxNewAccessbility: FC = () => {
@@ -77,7 +78,7 @@ const BoxNewAccessbility: FC = () => {
</div> </div>
<div className='mt-6 flex flex-wrap gap-6'> <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-1 xl:min-w-[40%] min-w-full flex justify-between items-center border-b border-[#8C90A3] border-opacity-30 py-2'>
<div className='flex gap-4'> <div className='flex gap-4'>
<div className='size-10 rounded-xl bg-red-300'></div> <div className='size-10 rounded-xl bg-red-300'></div>
<div> <div>
@@ -90,10 +91,13 @@ const BoxNewAccessbility: FC = () => {
</div> </div>
</div> </div>
<div> <div>
{/* <input type='checkbox' /> */} <SwitchComponent
active
onChange={() => { }}
/>
</div> </div>
</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-1 xl:min-w-[40%] min-w-full flex justify-between items-center border-b border-[#8C90A3] border-opacity-30 py-2'>
<div className='flex gap-4'> <div className='flex gap-4'>
<div className='size-10 rounded-xl bg-blue-300'></div> <div className='size-10 rounded-xl bg-blue-300'></div>
<div> <div>
@@ -106,10 +110,13 @@ const BoxNewAccessbility: FC = () => {
</div> </div>
</div> </div>
<div> <div>
{/* <input type='checkbox' /> */} <SwitchComponent
active
onChange={() => { }}
/>
</div> </div>
</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-1 xl:min-w-[40%] min-w-full flex justify-between items-center border-b border-[#8C90A3] border-opacity-30 py-2'>
<div className='flex gap-4'> <div className='flex gap-4'>
<div className='size-10 rounded-xl bg-green-300'></div> <div className='size-10 rounded-xl bg-green-300'></div>
<div> <div>
@@ -122,7 +129,10 @@ const BoxNewAccessbility: FC = () => {
</div> </div>
</div> </div>
<div> <div>
{/* <input type='checkbox' /> */} <SwitchComponent
active
onChange={() => { }}
/>
</div> </div>
</div> </div>
<div className='flex-1 min-w-[40%]'></div> <div className='flex-1 min-w-[40%]'></div>