Alert

"use client";

import { useState } from "react";
import { Button } from "@/components/manicat/button/button";
import { Alert } from "@/components/manicat/alert/alert";

export function AlertBannerExample() {
  const [open, setOpen] = useState(true);

  return (
    <div className="grid w-full max-w-lg gap-3">
      <Alert tone="warning" title="Your trial ends in 3 days" open={open} onDismiss={() => setOpen(false)}>
        <span className="block">Add a payment method to keep your workspace and its 14 projects.</span>
        <Button size="sm" className="mt-3">
          Add payment method
        </Button>
      </Alert>
      {!open && (
        <Button variant="secondary" onClick={() => setOpen(true)}>
          Bring the banner back
        </Button>
      )}
    </div>
  );
}

"use client";

import { Alert } from "@/components/manicat/alert/alert";

export function AlertResultExample() {
  return (
    <div className="grid w-full max-w-lg gap-3">
      <Alert tone="success" title="Deployed to production">
        v2.4.0 is live. Cache purged in 3 regions.
      </Alert>
      <Alert tone="danger" title="Build failed">
        Type error in src/billing.ts:42, “amount” is possibly undefined.
      </Alert>
    </div>
  );
}