generated from fahricansecer/boilerplate-fe
29 lines
985 B
TypeScript
29 lines
985 B
TypeScript
'use client';
|
|
|
|
import { Toaster as ChakraToaster, Portal, Spinner, Stack, Toast, createToaster } from '@chakra-ui/react';
|
|
|
|
export const toaster = createToaster({
|
|
placement: 'bottom-end',
|
|
pauseOnPageIdle: true,
|
|
});
|
|
|
|
export const Toaster = () => {
|
|
return (
|
|
<Portal>
|
|
<ChakraToaster toaster={toaster} insetInline={{ mdDown: '4' }}>
|
|
{(toast) => (
|
|
<Toast.Root width={{ md: 'sm' }}>
|
|
{toast.type === 'loading' ? <Spinner size='sm' color='blue.solid' /> : <Toast.Indicator />}
|
|
<Stack gap='1' flex='1' maxWidth='100%'>
|
|
{toast.title && <Toast.Title>{toast.title}</Toast.Title>}
|
|
{toast.description && <Toast.Description>{toast.description}</Toast.Description>}
|
|
</Stack>
|
|
{toast.action && <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>}
|
|
{toast.closable && <Toast.CloseTrigger />}
|
|
</Toast.Root>
|
|
)}
|
|
</ChakraToaster>
|
|
</Portal>
|
|
);
|
|
};
|