style-preview ToastDemo.tsx

83.33% Statements 5/6

100% Branches 0/0

66.66% Functions 2/3

83.33% Lines 5/6

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38 1x
 
 
 
 
1x
 
 
 
 
 
 
 
 
1x
1x
 
 
4x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  'use client';
 
import { Button } from '@/components/ui/Button';
import { useToast, type ToastType } from '@/components/ui/Toast';
 
const VARIANTS: { type: ToastType; label: string }[] = [
  { type: 'info', label: 'Info' },
  { type: 'success', label: 'Success' },
  { type: 'warning', label: 'Warning' },
  { type: 'error', label: 'Error' },
];
 
/** Buttons that trigger each toast type. `ToastProvider` is in the app layout. */
export function ToastDemo() {
  const { toast } = useToast();
  return (
    <div className="style-preview__row">
      {VARIANTS.map(({ type, label }) => (
        <Button
          key={type}
          variant="outline"
          size="sm"
          onClick={() =>
            toast({
              type,
              message: 'Lorem ipsum dolor sit amet, consectet eiusmod tempor incid elit.',
              action: { label: 'Link or Action', href: '#' },
              // Errors stay until dismissed; the rest auto-dismiss.
            })
          }
        >
          {label}
        </Button>
      ))}
    </div>
  );
}