// @name: Banner Inline Alerts // @dependencies: lucide-react import { Info, CircleCheck, TriangleAlert, CircleAlert } from "lucide-react"; const ALERTS = [ { icon: Info, title: "Scheduled maintenance", body: "We will be read-only on Sunday between 02.00 and 03.00 UTC.", tone: "muted" }, { icon: CircleCheck, title: "Payment received", body: "Your invoice for March has been settled. A receipt is on its way.", tone: "primary" }, { icon: TriangleAlert, title: "Approaching your limit", body: "You have used 92% of this month's included requests.", tone: "accent" }, { icon: CircleAlert, title: "Action required", body: "Update your billing details before 30 April to avoid interruption.", tone: "strong" }, ]; function toneClasses(tone: string) { if (tone === "primary") return "border-[var(--primary)] bg-[var(--secondary)] text-[var(--secondary-foreground)]"; if (tone === "accent") return "border-[var(--accent)] bg-[var(--muted)] text-[var(--foreground)]"; if (tone === "strong") return "border-transparent bg-[var(--foreground)] text-[var(--background)]"; return "border-[var(--border)] bg-[var(--muted)] text-[var(--foreground)]"; } export default function BannerInlineAlerts() { return (

{ALERTS.map((alert) => (

{alert.title}

{alert.body}

))}

); }

More banners sections

Banner Announcement Bar

Banner Cookie Consent