Toast

1"use client";2import { useEffect, useState } from "react";3import { Check } from "lucide-react";4import { GammaButton } from "./GammaButton";5 6export function GammaToast() {7  const [visible, setVisible] = useState(false);8  const [paused, setPaused] = useState(false);9  useEffect(() => {10    if (!visible || paused) return;11    const timeout = window.setTimeout(() => setVisible(false), 5000);12    return () => window.clearTimeout(timeout);13  }, [visible, paused]);14  return (15    <div className="toast-demo">16      <GammaButton onClick={() => setVisible(true)}>Show toast</GammaButton>17      {visible && (18        <div19          className="demo-toast"20          role="status"21          onMouseEnter={() => setPaused(true)}22          onMouseLeave={() => setPaused(false)}23          onFocus={() => setPaused(true)}24          onBlur={() => setPaused(false)}25        >26          <Check size={17} />27          <span>28            <strong>Changes saved</strong>