Initial commit

src/components/common/DialogContent/DialogContent.tsx

@@ -0,0 +1,78 @@
+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>
+  )
+}