返回 AiToEarn
DeleteConfirmDialog.tsx
根目录 / project / aitoearn-web / src / components / ChannelManager / components / DeleteConfirmDialog.tsx
1 /**
2 * DeleteConfirmDialog - 删除确认对话框组件
3 *
4 * 功能:
5 * - 确认删除空间或频道
6 * - 显示删除提示信息
7 */
8
9 'use client'
10
11 import { Loader2 } from 'lucide-react'
12 import { useTransClient } from '@/app/i18n/client'
13 import {
14 AlertDialog,
15 AlertDialogAction,
16 AlertDialogCancel,
17 AlertDialogContent,
18 AlertDialogDescription,
19 AlertDialogFooter,
20 AlertDialogHeader,
21 AlertDialogTitle,
22 } from '@/components/ui/alert-dialog'
23
24 interface DeleteConfirmDialogProps {
25 open: boolean
26 type: 'space' | 'channel'
27 name: string
28 loading?: boolean
29 onOpenChange: (open: boolean) => void
30 onConfirm: () => void
31 }
32
33 export function DeleteConfirmDialog({
34 open,
35 type,
36 name,
37 loading = false,
38 onOpenChange,
39 onConfirm,
40 }: DeleteConfirmDialogProps) {
41 const { t } = useTransClient('account')
42
43 return (
44 <AlertDialog open={open} onOpenChange={onOpenChange}>
45 <AlertDialogContent data-testid="cm-delete-dialog">
46 <AlertDialogHeader>
47 <AlertDialogTitle>{t('channelManager.deleteConfirm', '确认删除')}</AlertDialogTitle>
48 <AlertDialogDescription>
49 {t('channelManager.deleteDialogContent', {
50 type: type === 'space' ? t('space') : t('channel'),
51 name,
52 })}
53 </AlertDialogDescription>
54 </AlertDialogHeader>
55 <AlertDialogFooter>
56 <AlertDialogCancel data-testid="cm-delete-cancel-btn">{t('common.cancel', '取消')}</AlertDialogCancel>
57 <AlertDialogAction
58 data-testid="cm-delete-confirm-btn"
59 onClick={onConfirm}
60 disabled={loading}
61 className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
62 >
63 {loading ? (
64 <>
65 <Loader2 className="h-4 w-4 mr-2 animate-spin" />
66 {t('channelManager.deleting', '删除中...')}
67 </>
68 ) : (
69 t('common.confirm', '确认')
70 )}
71 </AlertDialogAction>
72 </AlertDialogFooter>
73 </AlertDialogContent>
74 </AlertDialog>
75 )
76 }
77
77 lines Plain Text