Initial commit: CMS completo com gerenciamento de leads e personalização de tema

frontend/src/components/Toast.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useEffect } from 'react';
+
+interface ToastProps {
+  message: string;
+  type: 'success' | 'error' | 'warning' | 'info';
+  onClose: () => void;
+  duration?: number;
+}
+
+export default function Toast({ message, type, onClose, duration = 3000 }: ToastProps) {
+  useEffect(() => {
+    const timer = setTimeout(onClose, duration);
+    return () => clearTimeout(timer);
+  }, [duration, onClose]);
+
+  const styles = {
+    success: 'bg-green-500 text-white',
+    error: 'bg-red-500 text-white',
+    warning: 'bg-yellow-500 text-white',
+    info: 'bg-blue-500 text-white',
+  };
+
+  const icons = {
+    success: 'ri-checkbox-circle-line',
+    error: 'ri-error-warning-line',
+    warning: 'ri-alert-line',
+    info: 'ri-information-line',
+  };
+
+  return (
+    <div className="fixed top-4 right-4 z-50 animate-in slide-in-from-top-5 fade-in duration-300">
+      <div className={`${styles[type]} rounded-xl shadow-lg px-6 py-4 flex items-center gap-3 min-w-[300px] max-w-md`}>
+        <i className={`${icons[type]} text-2xl`}></i>
+        <p className="flex-1 font-medium">{message}</p>
+        <button onClick={onClose} className="hover:opacity-70 transition-opacity">
+          <i className="ri-close-line text-xl"></i>
+        </button>
+      </div>
+    </div>
+  );
+}