Banner

<Banner variant="info">
  <span className="font-semibold">Information:</span> This is an informational banner message.
</Banner>

<Banner variant="success">
  <span className="font-semibold">Success!</span> Your operation completed successfully.
</Banner>

<Banner variant="warning">
  <span className="font-semibold">Warning:</span> Please review this important information.
</Banner>

<Banner variant="danger">
  <span className="font-semibold">Error:</span> Something went wrong. Please try again.
</Banner>

<Banner variant="development" animated>
  <span className="font-bold tracking-wide">DEVELOPMENT PREVIEW</span>
  <span className="hidden sm:inline text-amber-100/90">•</span>
  <span className="hidden sm:inline text-amber-100/90 font-normal">
    Active development in progress with experimental features
  </span>
</Banner>

<Banner variant="glass">
  <span className="font-semibold">Glass Effect:</span> A beautiful frosted glass banner style.
</Banner>

<Banner variant="gradient">
  <span className="font-semibold">✨ New Feature:</span> Check out our amazing gradient banner!
</Banner>

const [showBanner, setShowBanner] = useState(true)

<Banner 
  variant="info" 
  dismissible 
  onDismiss={() => setShowBanner(false)}
>
  <span className="font-semibold">Dismissible:</span> Click the X to dismiss this banner.
</Banner>

<Banner 
  variant="gradient"
  action={{
    label: 'Learn More',
    onClick: () => alert('Action clicked!')
  }}
  dismissible
  onDismiss={() => setShowBanner(false)}
>
  <span className="font-semibold">🎉 Special Offer:</span> Get 50% off your first month!
</Banner>

<Banner 
  variant="info" 
  fixed 
  position="top"
>
  This banner is fixed to the top of the viewport
</Banner>

<Banner 
  variant="info" 
  fixed 
  position="bottom"
>
  This banner is fixed to the bottom of the viewport
</Banner>

<Banner 
  variant="info"
  icon={
    <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
      <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
      <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
    </svg>
  }
>
  <span className="font-semibold">New Message:</span> You have unread emails.
</Banner>

<Banner variant="glass" icon={null}>
  <span className="font-semibold">No Icon:</span> This banner has no icon at all.
</Banner>