banner

1"use client";
2 
3import { useControllableState } from "@radix-ui/react-use-controllable-state";
4import { type LucideIcon, XIcon } from "lucide-react";
5import {
6  type ComponentProps,
7  createContext,
8  type HTMLAttributes,
9  type MouseEventHandler,
10  useContext,
11} from "react";
12import { Button } from "@/components/ui/button";
13import { cn } from "@/lib/utils";
14 
15type BannerContextProps = {
16  show: boolean;
17  setShow: (show: boolean) => void;
18};
19 
20export const BannerContext = createContext<BannerContextProps>({
21  show: true,
22  setShow: () => {},
23});
24 
25export type BannerProps = HTMLAttributes<HTMLDivElement> & {
26  visible?: boolean;
27  defaultVisible?: boolean;
28  onClose?: () => void;
29  inset?: boolean;
30};
31 
32export const Banner = ({
33  children,
34  visible,
35  defaultVisible = true,
36  onClose,
37  className,
38  inset = false,
39  ...props
40}: BannerProps) => {
41  const [show, setShow] = useControllableState({
42    defaultProp: defaultVisible,
43    prop: visible,
44    onChange: onClose,
45  });
46 
47  if (!show) {
48    return null;
49  }
50 
51  return (
52    <BannerContext.Provider value={{ show, setShow }}>
53      <div
54        className={cn(
55          "flex w-full items-center justify-between gap-2 bg-primary px-4 py-2 text-primary-foreground",
56          inset && "rounded-lg",
57          className
58        )}
59        {...props}
60      >
61        {children}
62      </div>
63    </BannerContext.Provider>
64  );
65};
66 
67export type BannerIconProps = HTMLAttributes<HTMLDivElement> & {
68  icon: LucideIcon;
69};
70 
71export const BannerIcon = ({
72  icon: Icon,
73  className,
74  ...props
75}: BannerIconProps) => (
76  <div
77    className={cn(
78      "rounded-full border border-background/20 bg-background/10 p-1 shadow-sm",
79      className
80    )}
81    {...props}
82  >
83    <Icon size={16} />
84  </div>
85);
86 
87export type BannerTitleProps = HTMLAttributes<HTMLParagraphElement>;
88 
89export const BannerTitle = ({ className, ...props }: BannerTitleProps) => (
90  <p className={cn("flex-1 text-sm", className)} {...props} />
91);
92 
93export type BannerActionProps = ComponentProps<typeof Button>;
94 
95export const BannerAction = ({
96  variant = "outline",
97  size = "sm",
98  className,
99  ...props
100}: BannerActionProps) => (
101  <Button
102    className={cn(
103      "shrink-0 bg-transparent hover:bg-background/10 hover:text-background",
104      className
105    )}
106    size={size}
107    variant={variant}
108    {...props}
109  />
110);
111 
112export type BannerCloseProps = ComponentProps<typeof Button>;
113 
114export const BannerClose = ({
115  variant = "ghost",
116  size = "icon",
117  onClick,
118  className,
119// … truncated