unsloth/studio/frontend/src/components/ui/sonner.tsx
2026-03-15 22:25:32 +01:00

78 lines
2 KiB
TypeScript

// SPDX-License-Identifier: AGPL-3.0-only
// Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0
import {
Alert02Icon,
CheckmarkCircle02Icon,
InformationCircleIcon,
Loading03Icon,
MultiplicationSignCircleIcon,
} from "@hugeicons/core-free-icons";
import { HugeiconsIcon } from "@hugeicons/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"
duration={5000}
icons={{
success: (
<HugeiconsIcon
icon={CheckmarkCircle02Icon}
strokeWidth={2}
className="size-4"
/>
),
info: (
<HugeiconsIcon
icon={InformationCircleIcon}
strokeWidth={2}
className="size-4"
/>
),
warning: (
<HugeiconsIcon
icon={Alert02Icon}
strokeWidth={2}
className="size-4"
/>
),
error: (
<HugeiconsIcon
icon={MultiplicationSignCircleIcon}
strokeWidth={2}
className="size-4"
/>
),
loading: (
<HugeiconsIcon
icon={Loading03Icon}
strokeWidth={2}
className="size-4 animate-spin"
/>
),
}}
style={
{
"--normal-bg": "var(--popover)",
"--normal-text": "var(--popover-foreground)",
"--normal-border": "var(--border)",
"--border-radius": "var(--radius)",
} as React.CSSProperties
}
toastOptions={{
classNames: {
toast: "cn-toast",
},
}}
{...props}
/>
);
};
export { Toaster };