modal add new accesbility
This commit is contained in:
@@ -26,14 +26,15 @@ const DefaulModal: FC<Props> = (props: Props) => {
|
||||
{
|
||||
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'>
|
||||
<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 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 rounded-b-none xl:rounded-b-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'>
|
||||
<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} />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@ import DefaulModal from '../../../components/DefaulModal'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Input from '../../../components/Input'
|
||||
import Select from '../../../components/Select'
|
||||
import SwitchComponent from '../../../components/Switch'
|
||||
|
||||
const BoxNewAccessbility: FC = () => {
|
||||
|
||||
@@ -77,7 +78,7 @@ const BoxNewAccessbility: FC = () => {
|
||||
</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-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='size-10 rounded-xl bg-red-300'></div>
|
||||
<div>
|
||||
@@ -90,10 +91,13 @@ const BoxNewAccessbility: FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{/* <input type='checkbox' /> */}
|
||||
<SwitchComponent
|
||||
active
|
||||
onChange={() => { }}
|
||||
/>
|
||||
</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='size-10 rounded-xl bg-blue-300'></div>
|
||||
<div>
|
||||
@@ -106,10 +110,13 @@ const BoxNewAccessbility: FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{/* <input type='checkbox' /> */}
|
||||
<SwitchComponent
|
||||
active
|
||||
onChange={() => { }}
|
||||
/>
|
||||
</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='size-10 rounded-xl bg-green-300'></div>
|
||||
<div>
|
||||
@@ -122,7 +129,10 @@ const BoxNewAccessbility: FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{/* <input type='checkbox' /> */}
|
||||
<SwitchComponent
|
||||
active
|
||||
onChange={() => { }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1 min-w-[40%]'></div>
|
||||
|
||||
Reference in New Issue
Block a user