'use client' import { useEffect, useState } from 'react' import { useReducedMotion } from 'motion/react' import { ArrowRight, X } from 'lucide-react' import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { AvatarGroup } from '@/components/motion/avatar-group' import { announcement, announcementAvatars } from "@/components/data/banner-1-data" /** * 'bar' — full-width strip above the header (the default). * 'pill' — floating rounded card pinned to the bottom of the viewport, with an avatar stack. * Both shapes share the same data file. */ const shape: 'bar' | 'pill' = 'bar' type Visibility = 'visible' | 'closing' | 'closed' export function Banner1() { /** * Dismissal lives in component state only, so a reload brings the banner back. To keep a * visitor's dismissal between visits, persist it (localStorage, a cookie, or the account) * and read that back here before the first paint. */ const [visibility, setVisibility] = useState('visible') const reduceMotion = useReducedMotion() useEffect(() => { if (visibility !== 'closing') { return } const timer = window.setTimeout(() => setVisibility('closed'), 200) return () => window.clearTimeout(timer) }, [visibility]) const dismiss = () => { setVisibility(reduceMotion ? 'closed' : 'closing') } if (visibility === 'closed') { return null } const closing = visibility === 'closing' if (shape === 'pill') { return (

{announcement.message}

{announcement.linkLabel}

) } return (

{/* Neutral alternative: swap for `bg-muted text-foreground border-b border-border`. */}

{announcement.badge ? ( {announcement.badge} ) : null}

{announcement.message}

{announcement.linkLabel} {announcement.linkLabel}

) } export default Banner1