banner-demo

1"use client";
2 
3import { Info } from "lucide-react";
4import * as React from "react";
5import {
6  Banner,
7  BannerActions,
8  BannerClose,
9  BannerContent,
10  BannerDescription,
11  BannerIcon,
12  BannerTitle,
13} from "@/registry/bases/base/ui/banner";
14import { Button } from "@/registry/bases/base/ui/button";
15 
16export default function BannerDemo() {
17  const [open, setOpen] = React.useState(true);
18 
19  return (
20    <>
21      <Banner open={open} onOpenChange={setOpen}>
22        <BannerIcon>
23          <Info />
24        </BannerIcon>
25        <BannerContent>
26          <BannerTitle>New update available</BannerTitle>
27          <BannerDescription>
28            A new version of the app is available. Update now to get the latest
29            features.
30          </BannerDescription>
31        </BannerContent>
32        <BannerActions>
33          <Button size="sm">Update now</Button>
34          <BannerClose />
35        </BannerActions>
36      </Banner>
37      {!open && <Button onClick={() => setOpen(true)}>Show banner</Button>}
38    </>
39  );
40}