50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
"use client"
|
||
|
||
import CustomModal from "./CustomModal"
|
||
import { IconInfoCircle } from "@tabler/icons-react"
|
||
import { Button, Group, Text, Flex, ThemeIcon } from "@mantine/core"
|
||
|
||
interface ComponentProps {
|
||
open: boolean
|
||
handleOk: () => void
|
||
handleCancel: () => void
|
||
onClose: () => void
|
||
}
|
||
|
||
const BackConfirmModal = ({
|
||
open,
|
||
handleOk,
|
||
handleCancel,
|
||
onClose,
|
||
}: ComponentProps) => {
|
||
return (
|
||
<CustomModal
|
||
title="温馨提示"
|
||
open={open}
|
||
centered
|
||
footer={
|
||
<Group justify="flex-end" gap="xs" mt="md">
|
||
<Button variant="subtle" onClick={onClose}>
|
||
取消
|
||
</Button>
|
||
<Button color="red" onClick={handleCancel}>
|
||
不保存
|
||
</Button>
|
||
<Button color="blue" onClick={handleOk}>
|
||
保存
|
||
</Button>
|
||
</Group>
|
||
}
|
||
onCancel={onClose}>
|
||
<Flex gap="sm" align="center">
|
||
<ThemeIcon color="yellow" variant="transparent" size="xl">
|
||
<IconInfoCircle size={28} />
|
||
</ThemeIcon>
|
||
<Text size="md">未保存当前标注结果，是否确认保存并退出？</Text>
|
||
</Flex>
|
||
</CustomModal>
|
||
)
|
||
}
|
||
|
||
export default BackConfirmModal
|