This project includes a global toast notification system that can be used from anywhere in the app.

• Global toast notifications
• Three levels: info, warning, and error
• Auto-dismiss after 5 seconds
• Manual dismiss with close button
• Smooth animations
• Responsive design
• TypeScript support

Create val
import { useToast } from "./components/ToastProvider.tsx";

const MyComponent = () => {
  const { toast } = useToast();

  const handleSuccess = () => {
    toast("Operation completed successfully!", "info");
  };

  const handleWarning = () => {
    toast("Please check your input", "warning");
  };

  const handleError = () => {
    toast("Something went wrong!", "error");
  };

  return (
    <div>
      <button onClick={handleSuccess}>Show Success</button>
      <button onClick={handleWarning}>Show Warning</button>
      <button onClick={handleError}>Show Error</button>
    </div>
  );
};

• "info" - Blue background, information messages
• "warning" - Yellow background, warning messages
• "error" - Red background, error messages

The useToast hook returns an object with:

• toast(message: string, level: ToastLevel) - Shows a toast notification
• removeToast(id: string) - Manually removes a toast by ID

Each toast has the following properties:

Create val
interface Toast {
  id: string;           // Unique identifier
  message: string;      // The message to display
  level: ToastLevel;    // "info" | "warning" | "error"
  timestamp: number;    // When the toast was created
}

The toast system is already set up in your app. The ToastProvider wraps your entire application in index.tsx, making the useToast hook available throughout the component tree.

Toasts are styled with Tailwind CSS classes and appear in the top-right corner of the screen. They include:

• Smooth slide-in/slide-out animations
• Color-coded backgrounds based on level
• Icons for each level
• Close button
• Responsive design
• Shadow and border styling

You can customize the toast appearance by modifying the ToastItem component in Toast.tsx. The styling uses Tailwind CSS classes and can be easily adjusted.