redesign

frontend/src/Toast.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect } from "react";
+
+export type ToastType = "success" | "error" | "info";
+
+interface ToastProps {
+  message: string;
+  type: ToastType;
+  onClose: () => void;
+  duration?: number;
+}
+
+export const Toast: React.FC<ToastProps> = ({
+  message,
+  type,
+  onClose,
+  duration = 3000,
+}) => {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onClose();
+    }, duration);
+    return () => clearTimeout(timer);
+  }, [onClose, duration]);
+
+  const getIcon = () => {
+    switch (type) {
+      case "success":
+        return "✓";
+      case "error":
+        return "✕";
+      default:
+        return "ℹ";
+    }
+  };
+
+  return (
+    <div className={`toast toast-${type}`}>
+      <span className="toast-icon">{getIcon()}</span>
+      <span className="toast-message">{message}</span>
+      <button className="toast-close" onClick={onClose}>
+        &times;
+      </button>
+    </div>
+  );
+};