'use client'; import { type HTMLAttributes, useCallback, useEffect, useState } from 'react'; import { X } from 'lucide-react'; import { cn } from '@/lib/utils'; import { buttonVariants } from '@/components/ui/button'; interface BannerProps extends HTMLAttributes { /** * @defaultValue 'normal' */ variant?: 'rainbow' | 'normal'; /** * @defaultValue true */ changeLayout?: boolean; /** * Banner message */ message?: string; /** * @defaultValue '3rem' */ height?: string; } export function Banner({ id, variant = 'normal', changeLayout = true, message, height = '3rem', ...props }: BannerProps): React.ReactElement { const [open, setOpen] = useState(true); const globalKey = id ? `banner-${id}` : undefined; useEffect(() => { if (globalKey) setOpen(localStorage.getItem(globalKey) !== 'true'); }, [globalKey]); const onClick = useCallback(() => { setOpen(false); if (globalKey) localStorage.setItem(globalKey, 'true'); }, [globalKey]); return (

{changeLayout && open ? ( ) : null} {globalKey ? ( ) : null} {id ? (