sonner.tsx 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. 'use client';
  2. import { useTheme } from 'next-themes';
  3. import { Toaster as Sonner, type ToasterProps } from 'sonner';
  4. import {
  5. CircleCheckIcon,
  6. InfoIcon,
  7. TriangleAlertIcon,
  8. OctagonXIcon,
  9. Loader2Icon,
  10. } from 'lucide-react';
  11. const Toaster = ({ ...props }: ToasterProps) => {
  12. const { theme = 'system' } = useTheme();
  13. return (
  14. <Sonner
  15. theme={theme as ToasterProps['theme']}
  16. className="toaster group"
  17. icons={{
  18. success: <CircleCheckIcon className="size-4" />,
  19. info: <InfoIcon className="size-4" />,
  20. warning: <TriangleAlertIcon className="size-4" />,
  21. error: <OctagonXIcon className="size-4" />,
  22. loading: <Loader2Icon className="size-4 animate-spin" />,
  23. }}
  24. style={
  25. {
  26. '--normal-bg': 'var(--popover)',
  27. '--normal-text': 'var(--popover-foreground)',
  28. '--normal-border': 'var(--border)',
  29. '--border-radius': 'var(--radius)',
  30. } as React.CSSProperties
  31. }
  32. toastOptions={{
  33. classNames: {
  34. toast: 'cn-toast',
  35. },
  36. }}
  37. {...props}
  38. />
  39. );
  40. };
  41. export { Toaster };