feat: add gain responsive

src/components/Notifications/Notifications.tsx

@@ -0,0 +1,35 @@
+import type { Notification } from '../../types/types';
+import './Notifications.css';
+
+type Props = {
+  notifications: Notification[];
+  onRemove: (id: number) => void;
+  onHover: (id: number, hovering: boolean) => void;
+};
+
+export default function Notifications({ notifications, onRemove, onHover }: Props) {
+  return (
+    <div className="notifications">
+      {notifications.map((n) => (
+        <div
+          key={n.id}
+          className={`notification ${n.type} ${n.removing ? 'notification-out' : ''}`}
+          onMouseEnter={() => onHover(n.id, true)}
+          onMouseLeave={() => onHover(n.id, false)}
+        >
+          <span className="notification-message" title={n.message}>
+            {n.message}
+          </span>
+
+          <button
+            className="tab-close notification-close"
+            onClick={() => onRemove(n.id)}
+            aria-label="Dismiss notification"
+          >
+            ×
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}