Toasts

1'use client';
2import React, { useState, useCallback, type ReactNode } from 'react';
3import Link from 'next/link';
4import { CheckCircle, AlertTriangle, XCircle, X, Code2 } from 'lucide-react';
5
6function SectionCard({ title, sourceSlug, children }: { title: string; sourceSlug?: string; children: ReactNode }) {
7  return (
8    <div>
9      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
10        <h3 className="text-theme-xl font-semibold text-gray-800 dark:text-white/90">{title}</h3>
11        {sourceSlug && (
12          <Link
13            href={sourceSlug}
14            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-brand-500 transition-colors hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10"
15          >
16            <Code2 className="size-3.5" />
17            View Source
18          </Link>
19        )}
20      </div>
21      <div className="rounded-xl border border-gray-200 bg-white p-6 dark:border-white/5 dark:bg-gray-dark">
22        {children}
23      </div>
24    </div>
25  );
26}
27
28export function ToastSection() {
29  const [toasts, setToasts] = useState<Toast[]>([]);
30  const counter = React.useRef(0);
31
32  const addToast = useCallback((type: Toast['type'], message: string) => {
33    const id = ++counter.current;
34    setToasts((p) => [...p, { id, type, message }]);
35    setTimeout(() => setToasts((p) => p.filter((t) => t.id !== id)), 3000);
36  }, []);
37
38  const toastStyles: Record<Toast['type'], { bg: string; icon: React.ElementType; iconColor: string }> = {
39    success: { bg: 'bg-success-50 dark:bg-success-500/15', icon: CheckCircle, iconColor: 'text-success-500' },
40    error: { bg: 'bg-error-50 dark:bg-error-500/15', icon: XCircle, iconColor: 'text-error-500' },
41    warning: { bg: 'bg-warning-50 dark:bg-warning-500/15', icon: AlertTriangle, iconColor: 'text-warning-500' },
42    info: { bg: 'bg-blue-light-50 dark:bg-blue-light-500/15', icon: Info, iconColor: 'text-blue-light-500' },
43  };
44
45  return (
46    <SectionCard title="Toast / Notification" sourceSlug="/ui/source/ui-elements/toasts">
47      <div className="flex flex-wrap gap-2">
48        <button onClick={() => addToast('success', 'Operation completed successfully!')} className="rounded-xl bg-success-500 px-4 py-2 text-sm font-medium text-white hover:bg-success-600 transition-colors">Success</button>
49        <button onClick={() => addToast('error', 'Something went wrong!')} className="rounded-xl bg-error-500 px-4 py-2 text-sm font-medium text-white hover:bg-error-600 transition-colors">Error</button>
50        <button onClick={() => addToast('warning', 'Please review your input.')} className="rounded-xl bg-warning-500 px-4 py-2 text-sm font-medium text-white hover:bg-warning-600 transition-colors">Warning</button>
51        <button onClick={() => addToast('info', 'A new update is available.')} className="rounded-xl bg-blue-light-500 px-4 py-2 text-sm font-medium text-white hover:bg-blue-light-600 transition-colors">Info</button>
52      </div>
53
54      {/* Toast Container */}
55      <div className="fixed bottom-6 right-6 z-[9999] flex flex-col gap-2">
56        {toasts.map((t) => {
57          const style = toastStyles[t.type];
58          const Icon = style.icon;
59          return (
60            <div key={t.id} className={`flex items-center gap-3 rounded-xl px-4 py-3 shadow-theme-lg ${style.bg} animate-in slide-in-from-right`}>
61              <Icon className={`size-5 ${style.iconColor}`} />
62              <p className="text-sm font-medium text-gray-800 dark:text-white/90">{t.message}</p>
63              <button onClick={() => setToasts((p) => p.filter((x) => x.id !== t.id))} className="ml-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
64                <X className="size-4" />
65              </button>
66            </div>
67          );
68        })}
69      </div>
70    </SectionCard>
71  );
72}