update the toaster

This commit is contained in:
Nate Kelley 2025-03-20 09:57:14 -06:00
parent 97d8dc8c46
commit b4706b40ff
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
2 changed files with 7 additions and 6 deletions

View File

@ -3,7 +3,7 @@
import React from 'react'; import React from 'react';
import { useTheme } from 'next-themes'; import { useTheme } from 'next-themes';
import { Toaster as ToasterSonner } from 'sonner'; import { Toaster as ToasterSonner } from 'sonner';
import { CircleCheck, CircleXmark, CircleWarning } from '@/components/ui/icons/NucleoIconOutlined'; import { CircleCheck, CircleXmark, CircleWarning } from '@/components/ui/icons/NucleoIconFilled';
type ToasterProps = React.ComponentProps<typeof ToasterSonner>; type ToasterProps = React.ComponentProps<typeof ToasterSonner>;
@ -12,9 +12,10 @@ const Toaster = ({ ...props }: ToasterProps) => {
return ( return (
<ToasterSonner <ToasterSonner
position="top-center" position="bottom-right"
expand={true} expand={false}
visibleToasts={5} visibleToasts={5}
duration={3000}
icons={{ icons={{
success: <CircleCheck />, success: <CircleCheck />,
error: <CircleXmark />, error: <CircleXmark />,
@ -29,7 +30,8 @@ const Toaster = ({ ...props }: ToasterProps) => {
'group toast group-[.toaster]:bg-background! border !p-3 group-[.toaster]:text-foreground! group-[.toaster]:border-border! group-[.toaster]:shadow!', 'group toast group-[.toaster]:bg-background! border !p-3 group-[.toaster]:text-foreground! group-[.toaster]:border-border! group-[.toaster]:shadow!',
description: 'group-[.toast]:text-muted-foreground', description: 'group-[.toast]:text-muted-foreground',
actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground', actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
cancelButton: 'group-[.toast]:bg-border group-[.toast]:text-foreground' cancelButton: 'group-[.toast]:bg-border group-[.toast]:text-foreground',
icon: 'mx-0! !flex !justify-center'
} }
}} }}
{...props} {...props}

View File

@ -27,8 +27,7 @@ const openNotification = (props: NotificationProps) => {
const toastOptions: ExternalToast = { const toastOptions: ExternalToast = {
...props, ...props,
description: !hasTitle && message ? message : message, description: !hasTitle && message ? message : message
position: 'top-center'
}; };
switch (type) { switch (type) {