38 lines
1.8 KiB
JavaScript
38 lines
1.8 KiB
JavaScript
import { Toaster as Sonner } from 'sonner';
|
|
import { useTheme } from '../../contexts/ThemeContext';
|
|
|
|
export function Toaster() {
|
|
const { theme } = useTheme();
|
|
|
|
return (
|
|
<Sonner
|
|
theme={theme}
|
|
position="top-right"
|
|
closeButton
|
|
expand={false}
|
|
visibleToasts={5}
|
|
duration={3500}
|
|
className="toaster group"
|
|
toastOptions={{
|
|
classNames: {
|
|
toast:
|
|
'group toast group-[.toaster]:rounded-xl group-[.toaster]:border group-[.toaster]:border-border group-[.toaster]:bg-card group-[.toaster]:text-card-foreground group-[.toaster]:shadow-lg group-[.toaster]:backdrop-blur-sm group-[.toaster]:border-l-4',
|
|
title: 'group-[.toast]:text-sm group-[.toast]:font-semibold group-[.toast]:text-foreground',
|
|
description: 'group-[.toast]:text-sm group-[.toast]:text-muted-foreground',
|
|
actionButton:
|
|
'group-[.toast]:rounded-md group-[.toast]:bg-primary group-[.toast]:px-3 group-[.toast]:py-1.5 group-[.toast]:text-sm group-[.toast]:font-medium group-[.toast]:text-primary-foreground',
|
|
cancelButton:
|
|
'group-[.toast]:rounded-md group-[.toast]:bg-muted group-[.toast]:px-3 group-[.toast]:py-1.5 group-[.toast]:text-sm group-[.toast]:font-medium group-[.toast]:text-muted-foreground',
|
|
closeButton:
|
|
'group-[.toast]:border-border group-[.toast]:bg-card group-[.toast]:text-muted-foreground group-[.toast]:hover:bg-accent group-[.toast]:hover:text-accent-foreground',
|
|
success: 'group-[.toaster]:border-l-emerald-500',
|
|
error: 'group-[.toaster]:border-l-destructive',
|
|
warning: 'group-[.toaster]:border-l-amber-500',
|
|
info: 'group-[.toaster]:border-l-sky-500',
|
|
default: 'group-[.toaster]:border-l-primary',
|
|
},
|
|
}}
|
|
/>
|
|
);
|
|
}
|