sonner.jsx 952 B

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