Alert

import { Alert } from "@/registry/ds/alert";

export default function AlertColors() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-3">
      <Alert size="sm" color="neutral" title="El sistema se actualiza el domingo a las 2:00." />
      <Alert size="sm" color="info" title="Hay nuevas electivas disponibles para tu plan." />
      <Alert size="sm" color="success" title="Guardamos tus cambios." />
      <Alert size="sm" color="warning" title="Tu inscripción vence en 3 días." />
      <Alert size="sm" color="danger" title="No pudimos procesar el pago." />
    </div>
  );
}

import { Alert } from "@/registry/ds/alert";

export default function AlertVariants() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-3">
      <Alert color="warning" variant="subtle" title="Subtle">El default. Informa sin competir con la página.</Alert>
      <Alert color="warning" variant="outline" title="Outline">Sobre fondos de color o cuando hay varios alerts juntos.</Alert>
      <Alert color="warning" variant="solid" title="Solid">Máximo énfasis. Uno por pantalla, para lo que no puede pasarse por alto.</Alert>
    </div>
  );
}

"use client";

import { useState } from "react";
import { Alert } from "@/registry/ds/alert";
import { Button } from "@/registry/ds/button";
import { ArrowUpRight } from "@/registry/ds/icons";

export default function AlertAction() {
  const [open, setOpen] = useState(true);
  if (!open) {
    return (
      <Button variant="tonal" size="sm" onClick={() => setOpen(true)}>
        Volver a mostrar
      </Button>
    );
  }
  return (
    <div className="w-full max-w-lg">
      <Alert
        color="danger"
        role="alert"
        title="No pudimos procesar el pago"
        onDismiss={() => setOpen(false)}
        action={
          <Button variant="text" size="sm" iconRight={<ArrowUpRight />}>
            Actualizar medio de pago
          </Button>
        }
      >
        La tarjeta terminada en 4821 fue rechazada. Tu inscripción queda reservada 48 horas.
      </Alert>
    </div>
  );
}

import { Alert } from "@/registry/ds/alert";

export default function AlertSizes() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-3">
      <Alert size="sm" color="info" title="Small">Dentro de cards, formularios y paneles.</Alert>
      <Alert size="md" color="info" title="Medium">El default, en el flujo de la página.</Alert>
      <Alert size="lg" color="info" title="Large">Encabezando una página o un estado vacío.</Alert>
    </div>
  );
}

import { Banner } from "@/registry/ds/alert";
import { Button } from "@/registry/ds/button";

export default function BannerBasic() {
  return (
    <div className="flex w-full flex-col gap-4">
      <Banner color="info" title="Inscripciones abiertas" action={<Button variant="text" size="sm">Inscribirme</Button>}>
        Hasta el 30 de marzo para el primer semestre.
      </Banner>
      <Banner color="warning" variant="solid" title="Mantenimiento programado">
        El domingo de 2:00 a 4:00 el campus virtual no va a estar disponible.
      </Banner>
    </div>
  );
}

"use client";

import { Banner } from "@/registry/ds/alert";
import { Button } from "@/registry/ds/button";

/** Solid para lo que no puede pasar desapercibido (una caída); subtle para avisos normales. Sin ✕ cuando el aviso tiene que quedarse */
export default function BannerVariants() {
  return (
    <div className="flex w-full flex-col gap-3">
      <Banner
        color="danger"
        variant="solid"
        title="El campus está en mantenimiento"
        action={
          // Sobre solid, la acción hereda el color on-solid: un link, no un Button
          <a href="#" className="font-medium underline underline-offset-4 hover:opacity-80 focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_var(--focus-ring)]">
            Estado del sistema
          </a>
        }
      >
        Volvemos a las 6:00. Las inscripciones de hoy se extienden un día.
      </Banner>
      <Banner color="success" title="Inscripción confirmada" action={<Button size="sm" variant="text">Ver comprobante</Button>} onDismiss={() => {}}>
        Te enviamos el detalle por correo.
      </Banner>
      <Banner color="warning" title="Te falta la foto del carnet" action={<Button size="sm" variant="text">Subirla</Button>}>
        Sin la foto no podés rendir finales.
      </Banner>
    </div>
  );
}