Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 1x 1x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 1x 5x 5x 5x | import { FC } from 'react'
import { toast, ToastPosition } from 'react-toastify'
import { useTranslate } from '../change-language'
import Error from '@/shared/assets/icons/common/error.svg'
import Success from '@/shared/assets/icons/common/success.svg'
import Info from '@/shared/assets/icons/common/info.svg'
export type NotifyType = 'success' | 'error' | 'info'
export interface NotificationProps {
status?: NotifyType
title?: string
payload?: string
icon?: FC
position?: ToastPosition
}
export const Notification: FC<NotificationProps> = ({ status = 'success', title, payload, icon }) => {
const { t } = useTranslate(['common'])
const DEFAULT_NOTIFICATION_BODY = {
success: {
title: t('Success'),
icon: Success,
iconStyle: 'stroke-green',
},
error: {
title: t('Error'),
icon: Error,
iconStyle: 'stroke-red',
},
info: {
title: t('Info'),
icon: Info,
iconStyle: 'stroke-gray',
},
}
const NotificationIcon = icon || DEFAULT_NOTIFICATION_BODY[status].icon
return (
<div className=' flex-col justify-center py-5 px-large max-w-[380px] w-full gap-base rounded-base'>
<div className='flex gap-2.5 items-center'>
<NotificationIcon
data-testid='notification-icon'
className={`flex-shrink-0 ${DEFAULT_NOTIFICATION_BODY[status].iconStyle}`}
/>
<h2 className='text-black'>{title || DEFAULT_NOTIFICATION_BODY[status].title}</h2>
</div>
{payload && <h4 className='text-text mt-3.5'>{payload}</h4>}
</div>
)
}
export const notify = (payload: string, settings?: Omit<NotificationProps, 'payload' | 't'>) =>
toast(<Notification {...settings} payload={payload} />, {
position: settings?.position || 'bottom-right',
})
|