Kitos
174919da4e
T-032: User management admin panel - backend users router with CRUD, frontend UsersPage with modals T-033: Audit log viewer - backend audit router with filters/pagination, frontend AuditLogPage T-034: Global error handling - ErrorBoundary, LoadingSpinner, ErrorMessage, Toast components T-035: Backend tests - pytest setup with SQLite, tests for health/auth/techniques/tests T-036: Documentation - Updated README with testing section, created docs/API.md
89 lines
2.4 KiB
TypeScript
89 lines
2.4 KiB
TypeScript
import { useState, useEffect, createContext, useContext, useCallback, type ReactNode } from "react";
|
|
import { CheckCircle, AlertCircle, Info, X } from "lucide-react";
|
|
|
|
type ToastType = "success" | "error" | "info";
|
|
|
|
interface Toast {
|
|
id: string;
|
|
type: ToastType;
|
|
message: string;
|
|
}
|
|
|
|
interface ToastContextValue {
|
|
showToast: (type: ToastType, message: string) => void;
|
|
}
|
|
|
|
const ToastContext = createContext<ToastContextValue | undefined>(undefined);
|
|
|
|
export function useToast() {
|
|
const context = useContext(ToastContext);
|
|
if (!context) {
|
|
throw new Error("useToast must be used within a ToastProvider");
|
|
}
|
|
return context;
|
|
}
|
|
|
|
const icons = {
|
|
success: CheckCircle,
|
|
error: AlertCircle,
|
|
info: Info,
|
|
};
|
|
|
|
const colors = {
|
|
success: "border-green-500/30 bg-green-900/30 text-green-400",
|
|
error: "border-red-500/30 bg-red-900/30 text-red-400",
|
|
info: "border-cyan-500/30 bg-cyan-900/30 text-cyan-400",
|
|
};
|
|
|
|
export function ToastProvider({ children }: { children: ReactNode }) {
|
|
const [toasts, setToasts] = useState<Toast[]>([]);
|
|
|
|
const showToast = useCallback((type: ToastType, message: string) => {
|
|
const id = Math.random().toString(36).substr(2, 9);
|
|
setToasts((prev) => [...prev, { id, type, message }]);
|
|
}, []);
|
|
|
|
const removeToast = useCallback((id: string) => {
|
|
setToasts((prev) => prev.filter((toast) => toast.id !== id));
|
|
}, []);
|
|
|
|
return (
|
|
<ToastContext.Provider value={{ showToast }}>
|
|
{children}
|
|
<div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2">
|
|
{toasts.map((toast) => (
|
|
<ToastItem
|
|
key={toast.id}
|
|
toast={toast}
|
|
onClose={() => removeToast(toast.id)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</ToastContext.Provider>
|
|
);
|
|
}
|
|
|
|
function ToastItem({ toast, onClose }: { toast: Toast; onClose: () => void }) {
|
|
const Icon = icons[toast.type];
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(onClose, 5000);
|
|
return () => clearTimeout(timer);
|
|
}, [onClose]);
|
|
|
|
return (
|
|
<div
|
|
className={`flex items-center gap-3 rounded-lg border px-4 py-3 shadow-lg animate-in slide-in-from-right ${colors[toast.type]}`}
|
|
>
|
|
<Icon className="h-5 w-5 flex-shrink-0" />
|
|
<p className="text-sm">{toast.message}</p>
|
|
<button
|
|
onClick={onClose}
|
|
className="ml-2 rounded p-1 hover:bg-white/10"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|