79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
|
import React from 'react'
|
||
|
|
import { Loader2 } from 'lucide-react'
|
||
|
|
|
||
|
|
interface DialogContentProps {
|
||
|
|
title: string
|
||
|
|
children: React.ReactNode
|
||
|
|
|
||
|
|
footer?: React.ReactNode
|
||
|
|
onConfirm?: () => void
|
||
|
|
onCancel?: () => void
|
||
|
|
confirmText?: string
|
||
|
|
cancelText?: string
|
||
|
|
|
||
|
|
isConfirmDisabled?: boolean
|
||
|
|
isConfirmLoading?: boolean
|
||
|
|
|
||
|
|
confirmButtonVariant?: 'primary' | 'danger'
|
||
|
|
confirmButtonType?: 'button' | 'submit'
|
||
|
|
}
|
||
|
|
|
||
|
|
export const DialogContent = ({
|
||
|
|
title,
|
||
|
|
children,
|
||
|
|
footer,
|
||
|
|
onConfirm,
|
||
|
|
onCancel,
|
||
|
|
confirmText = '确认',
|
||
|
|
cancelText = '取消',
|
||
|
|
isConfirmDisabled = false,
|
||
|
|
isConfirmLoading = false,
|
||
|
|
confirmButtonVariant = 'primary',
|
||
|
|
confirmButtonType = 'button'
|
||
|
|
}: DialogContentProps) => {
|
||
|
|
const confirmButtonClass = confirmButtonVariant === 'danger'
|
||
|
|
? "px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
|
||
|
|
: "px-4 py-2 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-lg hover:bg-gray-800 dark:hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
|
||
|
|
|
||
|
|
const showConfirmButton = onConfirm || confirmButtonType === 'submit'
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="p-6">
|
||
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
|
||
|
|
{title}
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<div className="mb-6">
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{footer ? (
|
||
|
|
footer
|
||
|
|
) : (
|
||
|
|
<div className="flex justify-end gap-3">
|
||
|
|
{onCancel && (
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={onCancel}
|
||
|
|
className="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors"
|
||
|
|
>
|
||
|
|
{cancelText}
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
{showConfirmButton && (
|
||
|
|
<button
|
||
|
|
type={confirmButtonType}
|
||
|
|
onClick={onConfirm}
|
||
|
|
disabled={isConfirmDisabled || isConfirmLoading}
|
||
|
|
className={confirmButtonClass}
|
||
|
|
>
|
||
|
|
{isConfirmLoading && <Loader2 className="animate-spin" size={16} />}
|
||
|
|
{confirmText}
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|