import { Alert } from "@hashti/react";

import { Alert } from "@hashti/react";

export function AlertSeveritiesExample() {
  return (
    <div className="space-y-4">
      <Alert kind="info" title="Scheduled Maintenance">
        The database cluster will undergo automated indexing on Sunday at 02:00 UTC.
      </Alert>

      <Alert kind="success" title="Deployment Successful">
        Version 2.4.0 is now live across all edge zones with zero downtime.
      </Alert>

      <Alert kind="warning" title="Storage Limit Reached">
        Your organization has used 88% of provisioned S3 capacity.
      </Alert>

      <Alert kind="error" title="Authentication Gateway Failure">
        Failed to establish mutual TLS connection with the upstream authentication provider.
      </Alert>
    </div>
  );
}

import { useState } from "react";
import { Alert, Button } from "@hashti/react";

export function DismissibleAlertExample() {
  const [showAlert, setShowAlert] = useState(true);

  return (
    <div className="space-y-4">
      {showAlert ? (
        <Alert
          kind="warning"
          title="Unsaved Architectural Changes"
          onDismiss={() => setShowAlert(false)}
        >
          You have pending migrations that have not yet been synchronized with the remote registry.
        </Alert>
      ) : (
        <Button variant="secondary" onPress={() => setShowAlert(true)}>
          Reset Alert
        </Button>
      )}
    </div>
  );
}

import { Alert, Button } from "@hashti/react";

export function ActionableAlertExample() {
  return (
    <Alert
      kind="error"
      title="Payment Method Declined"
      action={
        <div className="mt-3 flex gap-2">
          <Button variant="primary" size="sm">
            Update Card
          </Button>
          <Button variant="ghost" size="sm">
            Contact Support
          </Button>
        </div>
      }
    >
      We could not process your latest invoice because the card on file expired.
    </Alert>
  );
}

import { Alert } from "@hashti/react";

export function HighContrastAlertExample() {
  return (
    <Alert kind="error" lowContrast={false} title="Critical Cluster Outage">
      Node 04 stopped responding to health checks. Immediate operator intervention required.
    </Alert>
  );
}