sonner.tsx raw

   1  import {
   2    CircleCheckIcon,
   3    InfoIcon,
   4    Loader2Icon,
   5    OctagonXIcon,
   6    TriangleAlertIcon,
   7  } from "lucide-react";
   8  import { Toaster as Sonner, type ToasterProps } from "sonner";
   9  import { useTheme } from "./theme-provider";
  10  
  11  const Toaster = ({ ...props }: ToasterProps) => {
  12    const { isDarkMode } = useTheme();
  13    const theme: ToasterProps["theme"] = isDarkMode ? "dark" : "light";
  14  
  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          } as React.CSSProperties
  33        }
  34        {...props}
  35      />
  36    );
  37  };
  38  
  39  export { Toaster };
  40