Notice Alert

import { NoticeAlert } from "@/components/ui/notice-alert";

export default function NoticeAlertDemo() {
  return (
    <div className="flex min-h-svh w-full items-center justify-center bg-background p-6">
      <div className="flex w-full max-w-md flex-col gap-3">
        <NoticeAlert
          tone="info"
          title="Heads up"
          description="This project uses the latest deployment settings."
        />
        <NoticeAlert
          tone="success"
          title="Changes saved"
          description="Your preferences have been updated successfully."
        />
        <NoticeAlert
          tone="warning"
          title="Approaching limit"
          description="You have used 80% of your monthly quota."
        />
        <NoticeAlert
          tone="destructive"
          title="Something went wrong"
          description="We couldn't process your request. Please try again."
        />
      </div>
    </div>
  );
}