Add custom alert

2025-03-11 03:56:17 -07:00 · 2025-03-11 03:56:17 -07:00 · dc97dd629d
commit dc97dd629d
parent e45f4a777f
1 changed files with 126 additions and 0 deletions
--- a/src/components/dashboard/universal/CustomAlert.tsx
+++ b/src/components/dashboard/universal/CustomAlert.tsx
@ -0,0 +1,126 @@
+import React from 'react';
+import { Icon } from "@iconify/react";
+
+export type AlertType = 'info' | 'success' | 'warning' | 'error';
+
+interface CustomAlertProps {
+    type: AlertType;
+    title: string;
+    message: string;
+    icon?: string;
+    actionLabel?: string;
+    onAction?: () => void;
+    onClose?: () => void;
+    className?: string;
+}
+
+const CustomAlert: React.FC<CustomAlertProps> = ({
+    type,
+    title,
+    message,
+    icon,
+    actionLabel,
+    onAction,
+    onClose,
+    className = '',
+}) => {
+    // Default icons based on alert type
+    const defaultIcons = {
+        info: 'heroicons:information-circle',
+        success: 'heroicons:check-circle',
+        warning: 'heroicons:exclamation-triangle',
+        error: 'heroicons:document-text',
+    };
+
+    // Colors based on alert type
+    const colors = {
+        info: {
+            bg: 'bg-info/10',
+            border: 'border-info',
+            iconBg: 'bg-info/20',
+            iconColor: 'text-info',
+            actionBg: 'bg-info',
+            actionHover: 'hover:bg-info-focus',
+            actionRing: 'focus:ring-info',
+        },
+        success: {
+            bg: 'bg-success/10',
+            border: 'border-success',
+            iconBg: 'bg-success/20',
+            iconColor: 'text-success',
+            actionBg: 'bg-success',
+            actionHover: 'hover:bg-success-focus',
+            actionRing: 'focus:ring-success',
+        },
+        warning: {
+            bg: 'bg-warning/10',
+            border: 'border-warning',
+            iconBg: 'bg-warning/20',
+            iconColor: 'text-warning',
+            actionBg: 'bg-warning',
+            actionHover: 'hover:bg-warning-focus',
+            actionRing: 'focus:ring-warning',
+        },
+        error: {
+            bg: 'bg-error/10',
+            border: 'border-error',
+            iconBg: 'bg-error/20',
+            iconColor: 'text-error',
+            actionBg: 'bg-error',
+            actionHover: 'hover:bg-error-focus',
+            actionRing: 'focus:ring-error',
+        },
+    };
+
+    const color = colors[type];
+    const selectedIcon = icon || defaultIcons[type];
+
+    return (
+        <div className={`${color.bg} border-l-4 ${color.border} p-4 rounded-lg shadow-md ${className}`}>
+            <div className="flex items-center justify-between">
+                <div className="flex items-start space-x-3">
+                    <div className="flex-shrink-0 mt-0.5">
+                        <div className={`p-1.5 ${color.iconBg} rounded-full`}>
+                            <Icon
+                                icon={selectedIcon}
+                                className={`h-5 w-5 ${color.iconColor}`}
+                            />
+                        </div>
+                    </div>
+                    <div>
+                        <h3 className="font-semibold text-white mb-1">
+                            {title}
+                        </h3>
+                        <p className="text-sm text-base-content/80">
+                            {message}
+                        </p>
+                    </div>
+                </div>
+                <div className="flex items-center space-x-2">
+                    {actionLabel && onAction && (
+                        <button
+                            onClick={onAction}
+                            className={`inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white ${color.actionBg} ${color.actionHover} focus:outline-none focus:ring-2 focus:ring-offset-2 ${color.actionRing} transition-colors duration-200`}
+                        >
+                            {actionLabel}
+                        </button>
+                    )}
+                    {onClose && (
+                        <button
+                            onClick={onClose}
+                            className="p-1 rounded-full hover:bg-base-300/20 transition-colors duration-200"
+                            aria-label="Close"
+                        >
+                            <Icon
+                                icon="heroicons:x-mark"
+                                className="h-5 w-5 text-base-content/60"
+                            />
+                        </button>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CustomAlert;