Toast

1'use client';
2/* eslint-disable eslint-frontend-rules/top-level-const-snake */
3 
4import { cva, type VariantProps } from 'class-variance-authority';
5import { X } from 'lucide-react';
6import { ComponentProps, createContext, useCallback, useContext, useState } from 'react';
7 
8import { cn } from '@/lib/utils';
9 
10/*
11 * UX4G toast: max-width 350px, font-size 0.875rem, border-radius 0.5rem,
12 * border 1px solid neutral-200,
13 * shadow: 0px 4px 6px -2px rgba(33,33,33,0.03), 0px 12px 16px -4px rgba(33,33,33,0.08).
14 * Header: padding 0.75rem, NO border-bottom. Body: padding 0.75rem.
15 */
16const TOAST_VARIANTS = cva(
17  'pointer-events-auto relative flex w-[350px] max-w-full items-center justify-between overflow-hidden rounded-lg border p-3 text-sm shadow-lg transition-all',
18  {
19    variants: {
20      theme: {
21        default: 'bg-neutral-0 text-neutral border-neutral-200',
22        primary: 'bg-primary text-neutral-0 border-transparent',
23        secondary: 'bg-secondary text-neutral-0 border-transparent',
24        success: 'bg-success text-neutral-0 border-transparent',
25        danger: 'bg-danger text-neutral-0 border-transparent',
26        warning: 'bg-warning text-neutral-0 border-transparent',
27        info: 'bg-info text-neutral-0 border-transparent',
28      },
29    },
30    defaultVariants: {
31      theme: 'default',
32    },
33  },
34);
35 
36type TToastTheme = NonNullable<VariantProps<typeof TOAST_VARIANTS>['theme']>;
37 
38interface IToast {
39  id: string;
40  title?: string;
41  description?: string;
42  theme?: TToastTheme;
43  duration?: number;
44}
45 
46interface IToastContext {
47  toasts: IToast[];
48  addToast: (toast: Omit<IToast, 'id'>) => void;
49  removeToast: (id: string) => void;
50}
51 
52const ToastContext = createContext<IToastContext>({
53  toasts: [],
54  addToast: () => {},
55  removeToast: () => {},
56});
57 
58/** Context provider that manages toast state. */
59function ToastProvider({ children }: { children: React.ReactNode }) {
60  const [toasts, setToasts] = useState<IToast[]>([]);
61 
62  const addToast = useCallback((toast: Omit<IToast, 'id'>) => {
63    const id = Math.random().toString(36).slice(2);
64    setToasts(prev => [...prev, { ...toast, id }]);
65 
66    if (toast.duration !== 0) {
67      setTimeout(() => {
68        setToasts(prev => prev.filter(t => t.id !== id));
69      }, toast.duration ?? 5000);
70    }
71  }, []);
72 
73  const removeToast = useCallback((id: string) => {
74    setToasts(prev => prev.filter(t => t.id !== id));
75  }, []);
76 
77  return (
78    <ToastContext.Provider value={{ toasts, addToast, removeToast }}>
79// … truncated