Announcement bar

import { AnnouncementBar } from '@raystack/apsara';

export default function Example() {
  return (
    <AnnouncementBar text="New features available! Check out our latest updates." />
  );
}

import { AnnouncementBar } from '@raystack/apsara';

export default function WithAction() {
  return (
    <AnnouncementBar
      text="New version available"
      actionLabel="Update now"
      onActionClick={() => console.log('Update clicked')}
    />
  );
}

import { AnnouncementBar } from '@raystack/apsara';
import { InfoCircledIcon } from '@radix-ui/react-icons';

export default function WithIcon() {
  return (
    <AnnouncementBar
      text="Maintenance scheduled for tonight"
      leadingIcon={<InfoCircledIcon />}
    />
  );
}

import { AnnouncementBar } from '@raystack/apsara';

{/* Normal variant */}
<AnnouncementBar
  variant="normal"
  text="Standard announcement"
/>

{/* Gradient variant */}
<AnnouncementBar
  variant="gradient"
  text="Special announcement with gradient background"
/>

{/* Error variant */}
<AnnouncementBar
  variant="error"
  text="Critical system alert"
/>

import { AnnouncementBar } from '@raystack/apsara';
import { ArrowRightIcon } from '@radix-ui/react-icons';

<AnnouncementBar
  text="Learn more about our new features"
  actionIcon={<ArrowRightIcon />}
  onActionClick={() => window.location.href = '/features'}
/>