Announcement

import { Announcement } from '@hanzo/ui'

export function Default() {
  return (
    <Announcement>
      🎉 <strong>New feature!</strong> Check out our latest component updates
      and improvements.
    </Announcement>
  )
}

export function NotDismissible() {
  return (
    <Announcement dismissible={false}>
      Scheduled maintenance tonight from 11pm to 1am UTC.
    </Announcement>
  )
}

export function WithCallback() {
  const [shown, setShown] = useState(0)
  const [dismissed, setDismissed] = useState(false)
  return (
    <YStack gap="$3" items="flex-start">
      <Announcement key={shown} onDismiss={() => setDismissed(true)}>
        We use cookies to improve your experience.
      </Announcement>
      {dismissed ? (
        <YStack gap="$2" items="flex-start">
          <Paragraph color="$color11">Dismissed — onDismiss ran.</Paragraph>
          <Button
            variant="outline"
            onPress={() => {
              setShown((n) => n + 1)
              setDismissed(false)
            }}
          >
            Show it again
          </Button>
        </YStack>
      ) : null}
    </YStack>
  )
}

export function Stacked() {
  return (
    <YStack gap="$3">
      <Announcement>New: dark mode is here.</Announcement>
      <Announcement dismissible={false}>
        Your trial ends in 3 days.
      </Announcement>
    </YStack>
  )
}

Types

export type AnnouncementProps = Omit<ComponentProps<typeof AnnouncementFrame>, 'children'> & {
  children: ReactNode
  dismissible?: boolean
  onDismiss?: () => void
}

Exports