mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
8c0f80b778
* migrate from yarn to pnpm * feature-reporter: migrate from webpack to vite * remove unnecessary deps * bump pnpm to 10.32.1 * fix sitemap and favicon generator tools in docker * review and workflow fixes * fix pw test * update screenshots * update screenshot and add default maxDiffPixels value
64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import type {
|
|
CreateToasterReturn } from '@chakra-ui/react';
|
|
import {
|
|
Toaster as ChakraToaster,
|
|
Portal,
|
|
Spinner,
|
|
Stack,
|
|
Toast,
|
|
createToaster,
|
|
} from '@chakra-ui/react';
|
|
|
|
import { SECOND } from '../utils/consts';
|
|
import { CloseButton } from './close-button';
|
|
|
|
export const toaster: CreateToasterReturn = createToaster({
|
|
placement: 'top-end',
|
|
pauseOnPageIdle: true,
|
|
duration: 10 * SECOND,
|
|
offsets: {
|
|
top: '12px',
|
|
right: '12px',
|
|
bottom: '12px',
|
|
left: '12px',
|
|
},
|
|
});
|
|
|
|
export const Toaster = () => {
|
|
return (
|
|
<Portal>
|
|
<ChakraToaster toaster={ toaster } insetInline={{ mdDown: '4' }}>
|
|
{ (toast) => {
|
|
const closable = toast.meta?.closable !== undefined ? toast.meta.closable : true;
|
|
|
|
return (
|
|
<Toast.Root width={{ md: 'sm' }}>
|
|
{ toast.type === 'loading' ? (
|
|
<Spinner size="sm" color="blue.solid" my={ 1 }/>
|
|
) : null }
|
|
<Stack gap="0" flex="1" maxWidth="100%">
|
|
{ toast.title && <Toast.Title>{ toast.title }</Toast.Title> }
|
|
{ (toast.meta?.renderDescription || toast.description) && (
|
|
<Toast.Description>
|
|
{ toast.meta?.renderDescription?.() || toast.description }
|
|
</Toast.Description>
|
|
) }
|
|
</Stack>
|
|
{ toast.action && (
|
|
<Toast.ActionTrigger>{ toast.action.label }</Toast.ActionTrigger>
|
|
) }
|
|
{ closable && (
|
|
<Toast.CloseTrigger asChild>
|
|
<CloseButton/>
|
|
</Toast.CloseTrigger>
|
|
) }
|
|
</Toast.Root>
|
|
);
|
|
} }
|
|
</ChakraToaster>
|
|
</Portal>
|
|
);
|
|
};
|