Alert

"use client";

import { Alert, Button, type AlertTone, type AlertVariant } from "@waveinno/ui";
import * as React from "react";

const COPY: Record<AlertTone, [string, string]> = {
  info: ["Rates change on 1 November", "Cars pay ৳35 for the first hour from then. Monthly passes keep their price."],
  success: ["Payout sent", "৳1,24,500 reached your bank account ending 4410."],
  warning: ["Gate 2 camera is slow", "Plates are read in 4 s instead of 1 s. Attendants may need to type some."],
  danger: ["Payout on hold", "Your bank rejected the transfer. Check the account number in Billing."],
  neutral: ["Read-only", "You are viewing Gulshan as an auditor. Changes are turned off."],
};

export default function AlertDemo() {
  const [shown, setShown] = React.useState(true);
  return (
    <div className="space-y-6">
      {(["soft", "outline", "accent", "solid"] as AlertVariant[]).map((variant) => (
        <div key={variant} className="space-y-2">
          <p className="text-[12px] text-muted">{variant}</p>
          <div className="grid gap-2.5 md:grid-cols-2">
            {(["info", "success", "warning", "danger"] as AlertTone[]).map((tone) => (
              <Alert key={tone} tone={tone} variant={variant} title={COPY[tone][0]}>
                {COPY[tone][1]}
              </Alert>
            ))}
          </div>
        </div>
      ))}
      <div className="grid gap-2.5 md:grid-cols-2">
        {shown ? (
          <Alert
            tone="danger"
            title={COPY.danger[0]}
            onDismiss={() => setShown(false)}
            action={
              <>
                <Button size="sm">Fix in Billing</Button>
                <Button size="sm" variant="ghost">
                  Contact support
                </Button>
              </>
            }
          >
            {COPY.danger[1]}
          </Alert>
        ) : (
          <Button variant="secondary" onClick={() => setShown(true)} className="justify-self-start">
            Show the dismissed alert again
          </Button>
        )}
        <Alert tone="neutral" variant="outline" title={COPY.neutral[0]}>
          {COPY.neutral[1]}
        </Alert>
      </div>
    </div>
  );
}