| 1 | 'use client' |
| 2 | |
| 3 | import type { ToasterProps } from 'sonner' |
| 4 | import { Toaster as Sonner } from 'sonner' |
| 5 | |
| 6 | export function Toaster({ ...props }: ToasterProps) { |
| 7 | return ( |
| 8 | <Sonner |
| 9 | className="toaster group" |
| 10 | toastOptions={{ |
| 11 | classNames: { |
| 12 | toast: |
| 13 | 'group toast group-[.toaster]:bg-white group-[.toaster]:text-zinc-950 group-[.toaster]:border-zinc-200 group-[.toaster]:shadow-lg dark:group-[.toaster]:bg-zinc-950 dark:group-[.toaster]:text-zinc-50 dark:group-[.toaster]:border-zinc-800', |
| 14 | description: 'group-[.toast]:text-zinc-500 dark:group-[.toast]:text-zinc-400', |
| 15 | actionButton: |
| 16 | 'group-[.toast]:bg-zinc-900 group-[.toast]:text-zinc-50 dark:group-[.toast]:bg-zinc-50 dark:group-[.toast]:text-zinc-900', |
| 17 | cancelButton: |
| 18 | 'group-[.toast]:bg-zinc-100 group-[.toast]:text-zinc-500 dark:group-[.toast]:bg-zinc-800 dark:group-[.toast]:text-zinc-400', |
| 19 | success: |
| 20 | 'group-[.toaster]:!bg-green-50 group-[.toaster]:!text-green-900 group-[.toaster]:!border-green-200 dark:group-[.toaster]:!bg-green-950 dark:group-[.toaster]:!text-green-100 dark:group-[.toaster]:!border-green-800', |
| 21 | error: |
| 22 | 'group-[.toaster]:!bg-red-50 group-[.toaster]:!text-red-900 group-[.toaster]:!border-red-200 dark:group-[.toaster]:!bg-red-950 dark:group-[.toaster]:!text-red-100 dark:group-[.toaster]:!border-red-800', |
| 23 | warning: |
| 24 | 'group-[.toaster]:!bg-yellow-50 group-[.toaster]:!text-yellow-900 group-[.toaster]:!border-yellow-200 dark:group-[.toaster]:!bg-yellow-950 dark:group-[.toaster]:!text-yellow-100 dark:group-[.toaster]:!border-yellow-800', |
| 25 | info: 'group-[.toaster]:!bg-blue-50 group-[.toaster]:!text-blue-900 group-[.toaster]:!border-blue-200 dark:group-[.toaster]:!bg-blue-950 dark:group-[.toaster]:!text-blue-100 dark:group-[.toaster]:!border-blue-800', |
| 26 | }, |
| 27 | }} |
| 28 | {...props} |
| 29 | /> |
| 30 | ) |
| 31 | } |
| 32 |