Alert

"use client";

import { Alert, VStack } from "astralis-ui";

export function AlertDemo() {
  return (
    <VStack gap="3" alignItems="stretch" className="astralis:w-full astralis:max-w-xl">
      <Alert status="info">
        <Alert.Title>Scheduled maintenance</Alert.Title>
        <Alert.Description>The dashboard will be read-only on Saturday from 02:00–04:00 UTC.</Alert.Description>
      </Alert>
      <Alert status="success">
        <Alert.Title>Deploy complete</Alert.Title>
        <Alert.Description>v0.2.0 is live on all regions.</Alert.Description>
      </Alert>
      <Alert status="warning">
        <Alert.Title>Approaching quota</Alert.Title>
        <Alert.Description>You have used 90% of this month&apos;s build minutes.</Alert.Description>
      </Alert>
      <Alert status="error">
        <Alert.Title>Payment failed</Alert.Title>
        <Alert.Description>Your card was declined — update billing to keep deploys running.</Alert.Description>
      </Alert>
    </VStack>
  );
}

"use client";

import { useState } from "react";
import { Alert, Button, VStack } from "astralis-ui";

export function AlertVariants() {
  const [dismissed, setDismissed] = useState(false);

  return (
    <VStack gap="3" alignItems="stretch" className="astralis:w-full astralis:max-w-xl">
      <Alert status="success" variant="subtle">
        <Alert.Title>subtle — the default tinted panel</Alert.Title>
      </Alert>
      <Alert status="success" variant="solid">
        <Alert.Title>solid — maximum emphasis</Alert.Title>
      </Alert>
      <Alert status="success" variant="outline">
        <Alert.Title>outline — quiet, keeps the surface</Alert.Title>
      </Alert>
      <Alert status="success" variant="left-accent">
        <Alert.Title>left-accent — editorial side rule</Alert.Title>
      </Alert>
      {dismissed ? (
        <Button size="sm" variant="subtle" onClick={() => setDismissed(false)}>
          Bring back the dismissible alert
        </Button>
      ) : (
        <Alert status="info" onClose={() => setDismissed(true)}>
          <Alert.Title>Dismissible</Alert.Title>
          <Alert.Description>The ✕ calls your onClose handler.</Alert.Description>
        </Alert>
      )}
    </VStack>
  );
}