Banner

"use client";
import { CalendarX, SignalLow, Sparkles, Timer } from "lucide-react";
import { Banner } from "@/components/ui/notchset/banner";

export default function BannerDemo() {
  return (
    <div className="flex w-full max-w-[560px] flex-col gap-2">
      <Banner icon={<Timer />} title="Closes in 6 days">Send the order form to Priya</Banner>
      <Banner tone="warn" icon={<CalendarX />} title="Close date passed" action={{ label: "Update", onClick: () => {} }}>
        3 days ago
      </Banner>
      <Banner tone="warn" icon={<SignalLow />} title="Quiet for 18 days" action={{ label: "Log a touch", onClick: () => {} }}>
        last: Demo with the security team
      </Banner>
      <Banner tone="ok" icon={<Sparkles />} title="Airtable is set up." action={{ label: "Email Ana", onClick: () => {} }}>
        Start the conversation with Ana.
      </Banner>
    </div>
  );
}