Announcements in three importances

// apps/docs/examples/ui/announcement-banner.tsx'use client';
import {useState} from 'react';
import {AnnouncementBanner} from '@workspace/active-ui/components/composed/announcement-banner';import {Button} from '@workspace/active-ui/components/primitives/button';
/** * Announcements in three importances. The information can be dismissed; * the critical one cannot. Remembering a dismissal is the application's * work: here it lasts until you show it again. */export default function AnnouncementBannerExample() {  const [showInfo, setShowInfo] = useState(true);  return (    <div className="grid w-full gap-3">      {showInfo ? (        <AnnouncementBanner          importance="INFO"          importanceLabel="Information"          title="New statements are available"          body="The statements of 2026 can be downloaded from Monday."          action={{label: 'Read more', href: '#announcement'}}          dismissible          dismissLabel="Dismiss the announcement"          onDismiss={() => setShowInfo(false)}        />      ) : (        <Button          variant="outline"          size="sm"          className="justify-self-start"          onClick={() => setShowInfo(true)}        >          Show the information again        </Button>      )}      <AnnouncementBanner        importance="WARNING"        importanceLabel="Warning"        title="Maintenance on Saturday from 08:00 to 10:00"      />      <AnnouncementBanner        importance="CRITICAL"        importanceLabel="Critical"        title="Payments are delayed"        body="Payments of today will arrive one day later."      />    </div>  );}