"use client";

import { useState } from "react";
import { AlertDialog } from "@blifedesarrollo/blife-ui/alert-dialog";
import { Button } from "@blifedesarrollo/blife-ui/button";

export const VariantsDemo = () => {
  const [type, setType] = useState<string>(null);

  const handleOnOpenChange = () => setType(null);

  return (
    <>
      <div className="flex flex-col gap-3">
        <Button mode="outline" colorPallete="neutral" onClick={() => setType("success")}>
          Success
        </Button>
        <Button mode="outline" colorPallete="neutral" onClick={() => setType("warning")}>
          warning
        </Button>
        <Button mode="outline" colorPallete="neutral" onClick={() => setType("info")}>
          info
        </Button>
        <Button mode="outline" colorPallete="neutral" onClick={() => setType("danger")}>
          danger
        </Button>
        <Button mode="outline" colorPallete="neutral" onClick={() => setType("neutral")}>
          neutral
        </Button>
      </div>

      <AlertDialog
        open={type === "success"}
        variant="success"
        title="Titulo de alerta"
        description="Descripcion de la alerta"
        onOpenChange={handleOnOpenChange}
      />
      <AlertDialog
        open={type === "warning"}
        variant="warning"
        title="Titulo de alerta"
        description="Descripcion de la alerta"
        onOpenChange={handleOnOpenChange}
      />
      <AlertDialog
        open={type === "info"}
        variant="info"
        title="Titulo de alerta"
        description="Descripcion de la alerta"
        onOpenChange={handleOnOpenChange}
      />
      <AlertDialog
        open={type === "danger"}
        variant="danger"
        title="Titulo de alerta"
        description="Descripcion de la alerta"
        onOpenChange={handleOnOpenChange}
      />
      <AlertDialog
        open={type === "neutral"}
        variant="neutral"
        title="Titulo de alerta"
        description="Descripcion de la alerta"
        onOpenChange={handleOnOpenChange}
      />
    </>
  );
};
Alert dialog

Variantes

Icono personalizado

Ejemplos

Eliminar proyecto
