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 | 21x 141x 21x 141x | import React from 'react';
import classNames from 'classnames';
const placements = {
'top-left': ['top-0', 'left-0'],
'top-center': ['top-0', 'left-1/2', 'transform', '-translate-x-1/2'],
'top-right': ['top-0', 'right-0'],
'bottom-left': ['bottom-0', 'left-0'],
'bottom-center': ['bottom-0', 'left-1/2', 'transform', '-translate-x-1/2'],
'bottom-right': ['bottom-0', 'right-0'],
};
const classes = (placement, hasToasts, className) => classNames(
'box-border',
'max-w-full',
'max-h-screen',
'overflow-hidden',
'fixed',
'p-2',
placements[placement],
(hasToasts) ? null : 'pointer-events-none',
className,
)
export const ToastContainer = ({ hasToasts, placement, className, ...props }) => (
<div
className={classes(placement, hasToasts, className)}
style={{
zIndex: 1000,
}}
{...props}
/>
); |