'use client' import { createContext, Fragment, ReactNode, useContext, useEffect, useState } from 'react' import { XMarkIcon, InformationCircleIcon, ExclamationTriangleIcon, ExclamationCircleIcon } from '@heroicons/react/24/outline' import { NotificationContextType, NotificationProps } from './types' import makeDefaultNotification from './makeDefaultNotification' import { Transition } from '@headlessui/react' const NotificationContext = createContext(makeDefaultNotification()) export function useNotification() { return useContext(NotificationContext) } const notificationTimeInMilliseconds = 3000 const queue: NotificationProps[] = [] const renderIcon = (level: NotificationProps['level'] = 'info') => { switch (level) { default: return case 'info': return case 'warning': return case 'error': return } } type Props = { children: ReactNode } export function NotificationProvider({ children }: Props) { const [currentNotification, setCurrentNotification] = useState() const addNotificationToQueue = (notificationProps: NotificationProps) => { if (!queue.length) { queue.push(notificationProps) setCurrentNotification(notificationProps) } else { queue.push(notificationProps) } } const dismissCurrentNotification = () => { queue.shift() setCurrentNotification(queue[0]) } useEffect(() => { if (!queue.length) return setTimeout(dismissCurrentNotification, notificationTimeInMilliseconds) }, [currentNotification]) const handleOnClick = () => { if (currentNotification?.onActionClickCallback) currentNotification?.onActionClickCallback() if (currentNotification?.closeOnAction) dismissCurrentNotification() } const value = { addNotificationToQueue } return { children } <>
{renderIcon(currentNotification?.level)}

{currentNotification?.message}

{currentNotification?.actionButtonText ? : <> }
}