customize confirm modal
This commit is contained in:
parent
cf0a0f00b2
commit
9682de0854
@ -1,11 +1,11 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const ConfirmModal = ({ type, onSubmit, onClose, message, loading }) => {
|
||||
const ConfirmModal = ({ type, onSubmit, onClose, message, loading ,header}) => {
|
||||
|
||||
const TypeofIcon = (type) => {
|
||||
switch (type) {
|
||||
case "delete":
|
||||
return <i className='bx bx-x-circle text-danger bx-lg'></i>;
|
||||
return <i className='bx bx-x-circle text-danger ' style={{fontSize:"60px"}} ></i>;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
@ -34,9 +34,15 @@ const ConfirmModal = ({ type, onSubmit, onClose, message, loading }) => {
|
||||
aria-label="Close"
|
||||
onClick={onClose}
|
||||
/>
|
||||
<div className="text-center mb-1">
|
||||
<p className='fs-6'>{TypeofIcon(type)} <span className='fs-6'>{message}</span></p>
|
||||
<div className='d-flex justify-content-evenly'>
|
||||
<div className="text-start mb-1">
|
||||
|
||||
|
||||
{header && < strong className='mb-0 font-weight-bold'>{header }</strong>}
|
||||
<div className='row'>
|
||||
<div className='col-4 col-sm-2'> {TypeofIcon(type)}</div>
|
||||
<div className='col-8 col-sm-10 py-sm-2 py-1 text-sm-end'>
|
||||
<span className='fs-6 text'>{message}</span>
|
||||
<div className='d-flex justify-content-center mt-4'>
|
||||
<button
|
||||
className='btn btn-primary btn-sm'
|
||||
onClick={onSubmit}
|
||||
@ -45,13 +51,17 @@ const ConfirmModal = ({ type, onSubmit, onClose, message, loading }) => {
|
||||
{loading ? "Please Wait..." : "Yes"}
|
||||
</button>
|
||||
<button
|
||||
className='btn btn-secondary btn-sm'
|
||||
className='btn btn-secondary ms-4 btn-sm'
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
x
Reference in New Issue
Block a user