ToastNotification

import React from 'react';
import './ToastNotification.css';

interface ToastNotificationProps {
  variant: 'success' | 'error' | 'warning' | 'info';
  message: string;
}

const ToastNotification: React.FC<ToastNotificationProps> = ({ variant, message }) => {
  let className = 'toast-notification ';
  let color: string;
  switch (variant) {
    case 'success':
      color = '#34C759';
      className += 'toast-notification-success';
      break;
    case 'error':
      color = '#FF3737';
      className += 'toast-notification-error';
      break;
    case 'warning':
      color = '#F7DC6F';
      className += 'toast-notification-warning';
      break;
    case 'info':
      color = '#3498DB';
      className += 'toast-notification-info';
      break;
    default:
      throw new Error('Invalid variant');
  }

  return (
    <div className={className} style={{ backgroundColor: '#0A0A0A', borderColor: color, color: '#F5F5F0' }}>
      <span>{message}</span>
    </div>
  );
};

export default ToastNotification;

Component info

Dependencies

About

A customizable toast notification component with variants for success, error, warning, and info messages. Built with React and utilizing the Empire palette, this component is designed to provide a visually appealing and user-friendly way to display important messages to users. With its dark #0A0A0A background, this component is perfect for applications that require a sleek and modern design. The component is written in TypeScript and does not include any console.log statements, ensuring a clean and efficient codebase. The export default functionality allows for easy integration into existing React applications.