banner-stacked-demo

1"use client";
2 
3import {
4  AlertCircle,
5  AlertTriangle,
6  CheckCircle,
7  Info,
8  ServerCrash,
9  Sparkles,
10} from "lucide-react";
11import * as React from "react";
12import {
13  BannerActions,
14  BannerClose,
15  BannerContent,
16  BannerDescription,
17  BannerIcon,
18  Banners,
19  BannerTitle,
20  useBanners,
21} from "@/registry/bases/base/ui/banner";
22import { Button } from "@/registry/bases/base/ui/button";
23 
24export default function BannerStackedDemo() {
25  return (
26    <Banners maxVisible={1}>
27      <BannerControls />
28    </Banners>
29  );
30}
31 
32function BannerControls() {
33  const { onBannerAdd, banners } = useBanners();
34 
35  const onInfoBannerAdd = React.useCallback(() => {
36    onBannerAdd({
37      variant: "info",
38      content: (
39        <>
40          <BannerIcon>
41            <Info />
42          </BannerIcon>
43          <BannerContent>
44            <BannerTitle>Information</BannerTitle>
45            <BannerDescription>
46              This is an informational message.
47            </BannerDescription>
48          </BannerContent>
49          <BannerClose />
50        </>
51      ),
52    });
53  }, [onBannerAdd]);
54 
55  const onSuccessBannerAdd = React.useCallback(() => {
56    onBannerAdd({
57      variant: "success",
58      content: (
59        <>
60          <BannerIcon>
61            <CheckCircle />
62          </BannerIcon>
63          <BannerContent>
64            <BannerTitle>Success!</BannerTitle>
65            <BannerDescription>
66              Your changes have been saved successfully.
67            </BannerDescription>
68          </BannerContent>
69          <BannerClose />
70        </>
71      ),
72    });
73  }, [onBannerAdd]);
74 
75  const onWarningBannerAdd = React.useCallback(() => {
76    onBannerAdd({
77      variant: "warning",
78      content: ({ onClose }) => (
79        <>
80          <BannerIcon>
81            <AlertTriangle />
82          </BannerIcon>
83          <BannerContent>
84            <BannerTitle>Warning</BannerTitle>
85            <BannerDescription>
86              Please review your changes before continuing.
87            </BannerDescription>
88          </BannerContent>
89          <BannerActions>
90            <Button size="sm" variant="default">
91              Review
92            </Button>
93            <Button size="sm" variant="ghost" onClick={onClose}>
94              Skip
95            </Button>
96          </BannerActions>
97        </>
98      ),
99    });
100  }, [onBannerAdd]);
101 
102  const onDestructiveBannerAdd = React.useCallback(() => {
103    onBannerAdd({
104      variant: "destructive",
105      content: (
106        <>
107          <BannerIcon>
108// … truncated