Toast Stack

1import { Check, X, AlertTriangle, Info, ExternalLink } from 'lucide-react';
2import { Button } from '@/components/ui/button';
3import { Card } from '@/components/ui/card';
4
5export default function ToastStack() {
6  return (
7    <div className="flex min-h-[500px] items-end justify-center p-6">
8      <div className="flex flex-col gap-2">
9        <Card className="flex w-80 items-start gap-3 border-green-200 bg-green-50 p-4 dark:border-green-900 dark:bg-green-950/30">
10          <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-green-500 text-white">
11            <Check className="h-4 w-4" />
12          </div>
13          <div className="flex-1 space-y-1">
14            <p className="text-sm font-medium text-green-900 dark:text-green-100">Success!</p>
15            <p className="text-xs text-green-700 dark:text-green-300">Your changes have been saved.</p>
16          </div>
17          <Button variant="ghost" size="icon" className="h-6 w-6 text-green-600 hover:bg-green-100 dark:text-green-400 dark:hover:bg-green-900">
18            <X className="h-4 w-4" />
19          </Button>
20        </Card>
21
22        <Card className="flex w-80 items-start gap-3 border-red-200 bg-red-50 p-4 dark:border-red-900 dark:bg-red-950/30">
23          <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-red-500 text-white">
24            <X className="h-4 w-4" />
25          </div>
26          <div className="flex-1 space-y-1">
27            <p className="text-sm font-medium text-red-900 dark:text-red-100">Error</p>
28            <p className="text-xs text-red-700 dark:text-red-300">Failed to upload file.</p>
29          </div>
30          <Button variant="ghost" size="icon" className="h-6 w-6 text-red-600 hover:bg-red-100 dark:text-red-400 dark:hover:bg-red-900">
31            <X className="h-4 w-4" />
32          </Button>
33        </Card>
34
35        <Card className="flex w-80 items-start gap-3 border-amber-200 bg-amber-50 p-4 dark:border-amber-900 dark:bg-amber-950/30">
36          <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-amber-500 text-white">
37            <AlertTriangle className="h-4 w-4" />
38          </div>
39          <div className="flex-1 space-y-1">
40            <p className="text-sm font-medium text-amber-900 dark:text-amber-100">Warning</p>
41            <p className="text-xs text-amber-700 dark:text-amber-300">Your session expires in 5 minutes.</p>
42            <Button variant="link" className="h-auto p-0 text-xs text-amber-700 underline dark:text-amber-300">
43              Extend session
44            </Button>
45          </div>
46          <Button variant="ghost" size="icon" className="h-6 w-6 text-amber-600 hover:bg-amber-100 dark:text-amber-400 dark:hover:bg-amber-900">
47            <X className="h-4 w-4" />
48          </Button>
49        </Card>
50
51        <Card className="flex w-80 items-start gap-3 border-blue-200 bg-blue-50 p-4 dark:border-blue-900 dark:bg-blue-950/30">
52          <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-blue-500 text-white">
53            <Info className="h-4 w-4" />
54          </div>
55          <div className="flex-1 space-y-1">
56            <p className="text-sm font-medium text-blue-900 dark:text-blue-100">New Feature</p>
57            <p className="text-xs text-blue-700 dark:text-blue-300">Check out our latest updates.</p>
58            <Button variant="link" className="h-auto p-0 text-xs text-blue-700 dark:text-blue-300">
59              Learn more <ExternalLink className="ml-1 h-3 w-3" />
60            </Button>
61          </div>
62          <Button variant="ghost" size="icon" className="h-6 w-6 text-blue-600 hover:bg-blue-100 dark:text-blue-400 dark:hover:bg-blue-900">
63            <X className="h-4 w-4" />
64          </Button>
65        </Card>
66      </div>
67    </div>
68  );
69}