sonner-demo.tsx — ui Source File

Source Code

"use client"

import * as React from "react"
import { toast } from "sonner"

import { Button } from "@/registry/new-york-v4/ui/button"

const promiseCode = "`${data.name} toast has been added`"

const allTypes = [
  {
    name: "Default",
    snippet: `toast('Event has been created')`,
    action: () => toast("Event has been created"),
  },
  {
    name: "Description",
    snippet: `toast.message('Event has been created', {
  description: 'Monday, January 3rd at 6:00pm',
})`,
    action: () =>
      toast("Event has been created", {
        description: "Monday, January 3rd at 6:00pm",
      }),
  },
  {
    name: "Success",
    snippet: `toast.success('Event has been created')`,
    action: () => toast.success("Event has been created"),
  },
  {
    name: "Info",
    snippet: `toast.info('Be at the area 10 minutes before the event time')`,
    action: () => toast.info("Be at the area 10 minutes before the event time"),
  },
  {
    name: "Warning",
    snippet: `toast.warning('Event start time cannot be earlier than 8am')`,
    action: () => toast.warning("Event start time cannot be earlier than 8am"),
  },
  {
    name: "Error",
    snippet: `toast.error('Event has not been created')`,
    action: () => toast.error("Event has not been created"),
  },
  {
    name: "Action",
    action: () =>
      toast.message("Event has been created", {
        action: {
          label: "Undo",
          onClick: () => console.log("Undo"),
        },
      }),
  },
  {
    name: "Cancel",
    action: () =>
      toast.message("Event has been created", {
        cancel: {
// ... (73 more lines)