"use client";

import { useToast } from "@/hooks/use-toast";
import {
  Alert,
  AlertIcon,
  AlertTitle,
  AlertToolbar,
} from "@/components/ui/alert/radix";
import { Button } from "@/components/ui/button/base";
import { CircleAlert } from "lucide-react";

export default function ToastDemo() {
  const toast = useToast();

  return (
    <div className="items-center gap-2 grid grid-cols-3">
      <Button
        variant="outline"
        onClick={() => {
          const id = toast.add({
            data: {
              content: (
                <Alert
                  close={true}
                  onClose={() => toast.close(id)}
                  className="border border-border shadow-lg"
                >
                  <AlertIcon>
                    <CircleAlert />
                  </AlertIcon>
                  <AlertTitle>This is a primary alert</AlertTitle>
                  <AlertToolbar>
                    <Button variant="outline" size="sm" className="flex mt-0.5">
                      Upgrade
                    </Button>
                  </AlertToolbar>
                </Alert>
              ),
            },
          });
        }}
      >
        Default
      </Button>
      <Button
        variant="outline"
        onClick={() => {
          const id = toast.add({
            data: {
              content: (
                <Alert
                  close={true}
                  variant="primary"
                  icon="primary"
                  onClose={() => toast.close(id)}
                >
                  <AlertIcon>
                    <CircleAlert />
                  </AlertIcon>
                  <AlertTitle>This is a primary alert</AlertTitle>
                </Alert>
              ),
            },
          });
        }}
      >
        Primary
      </Button>
      <Button
        variant="outline"
        onClick={() => {
          const id = toast.add({
            data: {
              content: (
                <Alert
                  close={true}
                  variant="success"
                  icon="success"
                  onClose={() => toast.close(id)}
                >
                  <AlertIcon>
                    <CircleAlert />
                  </AlertIcon>
                  <AlertTitle>This is a success alert</AlertTitle>
                </Alert>
              ),
            },
          });
        }}
      >
        Success
      </Button>
      <Button
        variant="outline"
        onClick={() => {
          const id = toast.add({
            data: {
              content: (
                <Alert
                  close={true}
                  variant="destructive"
                  icon="destructive"
                  onClose={() => toast.close(id)}
                >
                  <AlertIcon>
                    <CircleAlert />
                  </AlertIcon>
                  <AlertTitle>This is a destructive alert</AlertTitle>
                </Alert>
              ),
            },
          });
        }}
      >
        Destructive
      </Button>
      <Button
        variant="outline"
        onClick={() => {
          const id = toast.add({
            data: {
              content: (
                <Alert
                  close={true}
                  variant="warning"
                  icon="warning"
                  onClose={() => toast.close(id)}
                >
                  <AlertIcon>
                    <CircleAlert />
                  </AlertIcon>
                  <AlertTitle>This is a warning alert</AlertTitle>
                </Alert>
              ),
            },
          });
        }}
      >
        Warning
      </Button>
      <Button
        variant="outline"
        onClick={() => {
          const id = toast.add({
            data: {
              content: (
                <Alert
                  close={true}
                  variant="info"
                  icon="info"
                  onClose={() => toast.close(id)}
                >
                  <AlertIcon>
                    <CircleAlert />
                  </AlertIcon>
                  <AlertTitle>This is a info alert</AlertTitle>
                </Alert>
              ),
            },
          });
        }}
      >
        Info
      </Button>
    </div>
  );
}
Toast Pattern

Close

Custom

Default

Positions

Promise

Type

We use cookies
