generated from template/vite-react-template
25 lines
1.0 KiB
TypeScript
25 lines
1.0 KiB
TypeScript
import { ToastContentProps } from 'react-toastify';
|
||
|
||
export function SplitButtons({ closeToast }: ToastContentProps) {
|
||
return (
|
||
// using a grid with 3 columns
|
||
<div className='grid grid-cols-[1fr_1px_80px] w-full'>
|
||
<div className='flex flex-col p-4'>
|
||
<h3 className='text-zinc-800 text-sm font-semibold'>提示</h3>
|
||
<p className='text-sm'>有未保存的内容，是否继续打开？</p>
|
||
</div>
|
||
{/* that's the vertical line which separate the text and the buttons*/}
|
||
<div className='bg-zinc-900/20 h-full' />
|
||
<div className='grid grid-rows-[1fr_1px_1fr] h-full'>
|
||
{/*specifying a custom closure reason that can be used with the onClose callback*/}
|
||
<button onClick={() => closeToast('cancle')} className='text-purple-600'>
|
||
取消
|
||
</button>
|
||
<div className='bg-zinc-900/20 w-full' />
|
||
{/*specifying a custom closure reason that can be used with the onClose callback*/}
|
||
<button onClick={() => closeToast('success')}>继续</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|