Toast

"use client"


import { Trash, Warning, X } from "@phosphor-icons/react"
import {
  Button,
  Heading,
  Text,
  Toaster,
  toast
} from "@glinui/ui"


export function ToastStackHero() {
  return (
    <div className="mx-auto grid w-full max-w-md gap-4 rounded-2xl border border-[var(--line-soft)] bg-[var(--surface-1)] p-5 [box-shadow:var(--elev-1)]">
      <Toaster position="bottom-right" closeButton visibleToasts={4} />
      <div>
        <Heading level={3} size="sm">Notification variants</Heading>
        <Text size="sm" className="mt-1 text-[var(--color-muted)]">Fire a few in a row to see them stack and collapse.</Text>
      </div>
      <div className="flex flex-wrap gap-2">
        <Button size="sm" onClick={() => toast.success("Deploy finished", { description: "lumen-web is live on production." })}>Success</Button>
        <Button size="sm" variant="outline" onClick={() => toast.warning("Storage almost full", { description: "You have used 92 percent of your plan." })}>
          <Warning aria-hidden="true" />
          Warning
        </Button>
        <Button size="sm" variant="outline" onClick={() => toast.error("Payment failed", { description: "Your card ending 4242 was declined." })}>
          <X aria-hidden="true" />
          Error
        </Button>
        <Button size="sm" variant="outline" onClick={() => toast("File deleted", { description: "launch-banner.png moved to trash.", action: { label: "Undo", onClick: () => toast.success("Restored") } })}>
          <Trash aria-hidden="true" />
          With undo
        </Button>
      </div>
    </div>
  )
}

import { Toaster, toast, Button } from "@glinui/ui"


export function Demo() {
  return (
    <>
      <Toaster position="bottom-right" />
      <Button onClick={() => toast("File deleted", {
        description: "The file has been moved to trash.",
        action: { label: "Undo", onClick: () => toast.success("Restored") }
      })}>
        With action
      </Button>
    </>
  )
}

import { Toaster, toast, Button } from "@glinui/ui"


export function Demo() {
  const fetchData = () => new Promise((resolve) => setTimeout(resolve, 2000))
  return (
    <>
      <Toaster position="bottom-right" />
      <Button onClick={() => toast.promise(fetchData(), {
        loading: "Generating report...",
        success: "Report is ready!",
        error: "Failed to generate report"
      })}>
        Promise toast
      </Button>
    </>
  )
}

import { Button, Toaster, toast } from "@glinui/ui"


// The Toaster owns the look of every toast it renders.
export function Demo() {
  return (
    <>
      <Toaster position="bottom-right" variant="plain" />
      <Button onClick={() => toast.success("Saved", { description: "Rendered with the plain look." })}>
        Show toast
      </Button>
    </>
  )
}

import { Button, Toaster, toast } from "@glinui/ui"


export function Demo() {
  return (
    <>
      <Toaster position="bottom-right" variant="glass" />
      <Button onClick={() => toast("Settings saved", { description: "Frosted, with a readable floor." })}>
        Show glass toast
      </Button>
    </>
  )
}