Banner 1

1'use client'
2 
3import { useEffect, useState } from 'react'
4import { useReducedMotion } from 'motion/react'
5import { ArrowRight, X } from 'lucide-react'
6import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
7import { Badge } from '@/components/ui/badge'
8import { Button } from '@/components/ui/button'
9import { announcement, announcementAvatars } from "@/components/data/banner-1-data"
10 
11/**
12 * 'bar'  — full-width strip above the header (the default).
13 * 'pill' — floating rounded card pinned to the bottom of the viewport, with an avatar stack.
14 * Both shapes share the same dismissal persistence and the same data file.
15 */
16const shape: 'bar' | 'pill' = 'bar'
17 
18const storageKey = `banner-dismissed:${announcement.id}`
19 
20type Visibility = 'pending' | 'visible' | 'closing' | 'closed'
21 
22export function Banner1() {
23  /**
24   * Starting in `pending` means the server and the first client render agree on "nothing",
25   * so a previously dismissed banner never flashes in before the effect can hide it.
26   */
27  const [visibility, setVisibility] = useState<Visibility>('pending')
28  const reduceMotion = useReducedMotion()
29 
30  useEffect(() => {
31    let dismissed = false
32    try {
33      dismissed = window.localStorage.getItem(storageKey) === 'true'
34    } catch {
35      // Private-mode browsers throw on localStorage access; showing the banner is the safe default.
36    }
37 
38    setVisibility(dismissed ? 'closed' : 'visible')
39  }, [])
40 
41  useEffect(() => {
42    if (visibility !== 'closing') {
43      return
44    }
45 
46    const timer = window.setTimeout(() => setVisibility('closed'), 200)
47    return () => window.clearTimeout(timer)
48  }, [visibility])
49 
50  const dismiss = () => {
51    try {
52      window.localStorage.setItem(storageKey, 'true')
53    } catch {
54      // Ignore — dismissal just won't survive a reload.
55    }
56 
57    setVisibility(reduceMotion ? 'closed' : 'closing')
58  }
59 
60  if (visibility === 'pending' || visibility === 'closed') {
61    return null
62  }
63 
64  const closing = visibility === 'closing'
65 
66  if (shape === 'pill') {
67    return (
68      <div
69        className={`fixed inset-x-4 bottom-4 z-50 transition-all duration-200 ease-out motion-reduce:transition-none sm:inset-x-auto sm:left-1/2 sm:-translate-x-1/2 ${
70          closing ? 'translate-y-2 opacity-0' : 'opacity-100'
71        }`}
72      >
73        <div className='bg-background/95 border-border flex items-center gap-3 rounded-full border py-2 pr-2 pl-3 shadow-lg backdrop-blur sm:pl-4'>
74// … truncated