afkarxyz
28 lines
1.6 KiB
TypeScript
28 lines
1.6 KiB
TypeScript
import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, } from "lucide-react";
|
|
import { useTheme } from "next-themes";
|
|
import { Toaster as Sonner, type ToasterProps } from "sonner";
|
|
const Toaster = ({ ...props }: ToasterProps) => {
|
|
const { theme = "system" } = useTheme();
|
|
return (<Sonner theme={theme as ToasterProps["theme"]} className="toaster group" icons={{
|
|
success: <CircleCheckIcon className="size-4"/>,
|
|
info: <InfoIcon className="size-4"/>,
|
|
warning: <TriangleAlertIcon className="size-4"/>,
|
|
error: <OctagonXIcon className="size-4"/>,
|
|
loading: <Loader2Icon className="size-4 animate-spin"/>,
|
|
}} toastOptions={{
|
|
classNames: {
|
|
success: "border-green-500 bg-green-50 text-green-900 dark:bg-green-950 dark:text-green-100 [&>svg]:text-green-500",
|
|
error: "border-red-500 bg-red-50 text-red-900 dark:bg-red-950 dark:text-red-100 [&>svg]:text-red-500",
|
|
warning: "border-yellow-500 bg-yellow-50 text-yellow-900 dark:bg-yellow-950 dark:text-yellow-100 [&>svg]:text-yellow-500",
|
|
info: "border-blue-500 bg-blue-50 text-blue-900 dark:bg-blue-950 dark:text-blue-100 [&>svg]:text-blue-500",
|
|
},
|
|
}} style={{
|
|
"--normal-bg": "var(--popover)",
|
|
"--normal-text": "var(--popover-foreground)",
|
|
"--normal-border": "var(--border)",
|
|
"--border-radius": "var(--radius)",
|
|
left: "calc(56px + 1rem)",
|
|
} as React.CSSProperties} {...props}/>);
|
|
};
|
|
export { Toaster };
|