gorkem-bwl
7874439e4c
- Use AlertCircle for error and AlertTriangle for warning icons - Use Icon color prop instead of CSS fill for Lucide stroke-based icons - Replace wildcard import with explicit named imports for tree-shaking - Replace sx prop with style prop on Icon components - Add Trash2 to Icon component imports
115 lines
2.1 KiB
React
115 lines
2.1 KiB
React
import Stack from "@mui/material/Stack";
|
|
import IconButton from "@mui/material/IconButton";
|
|
import Typography from "@mui/material/Typography";
|
|
import Button from "@mui/material/Button";
|
|
import ToastBody from "./body.jsx";
|
|
import Icon from "../Icon";
|
|
|
|
// Utils
|
|
import { useTheme } from "@emotion/react";
|
|
import PropTypes from "prop-types";
|
|
|
|
const icons = {
|
|
info: (
|
|
<Icon
|
|
name="Info"
|
|
size={24}
|
|
/>
|
|
),
|
|
error: (
|
|
<Icon
|
|
name="AlertCircle"
|
|
size={24}
|
|
/>
|
|
),
|
|
warning: (
|
|
<Icon
|
|
name="AlertTriangle"
|
|
size={24}
|
|
/>
|
|
),
|
|
};
|
|
|
|
const Toast = ({ variant, title, body, onClick, hasDismiss, hasIcon }) => {
|
|
const theme = useTheme();
|
|
const icon = icons[variant];
|
|
|
|
return (
|
|
<Stack
|
|
gap={theme.spacing(2)}
|
|
paddingTop={theme.spacing(4)}
|
|
paddingRight={theme.spacing(8)}
|
|
paddingBottom={theme.spacing(4)}
|
|
paddingLeft={theme.spacing(8)}
|
|
backgroundColor={theme.palette.alert.main}
|
|
border={`solid 1px ${theme.palette.alert.contrastText}`}
|
|
borderRadius={theme.shape.borderRadius}
|
|
>
|
|
<Stack
|
|
direction="row"
|
|
gap={theme.spacing(8)}
|
|
justifyContent="space-between"
|
|
alignItems="center"
|
|
>
|
|
{hasIcon && icon}
|
|
{title && (
|
|
<Typography
|
|
fontWeight="700"
|
|
color={theme.palette.secondary.contrastText}
|
|
>
|
|
{title}
|
|
</Typography>
|
|
)}
|
|
{title && (
|
|
<IconButton onClick={onClick}>
|
|
<Icon
|
|
name="X"
|
|
size={20}
|
|
/>
|
|
</IconButton>
|
|
)}
|
|
</Stack>
|
|
|
|
<Stack
|
|
direction="row"
|
|
gap={theme.spacing(2)}
|
|
alignItems="center"
|
|
>
|
|
<ToastBody body={body} />
|
|
{!title && (
|
|
<IconButton onClick={onClick}>
|
|
<Icon
|
|
name="X"
|
|
size={20}
|
|
/>
|
|
</IconButton>
|
|
)}
|
|
</Stack>
|
|
{hasDismiss && (
|
|
<Button
|
|
variant="text"
|
|
color="info"
|
|
onClick={onClick}
|
|
sx={{
|
|
fontWeight: "600",
|
|
width: "fit-content",
|
|
}}
|
|
>
|
|
Dismiss
|
|
</Button>
|
|
)}
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default Toast;
|
|
|
|
Toast.propTypes = {
|
|
variant: PropTypes.string.isRequired,
|
|
title: PropTypes.string,
|
|
body: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
|
|
hasDismiss: PropTypes.bool,
|
|
hasIcon: PropTypes.bool,
|
|
onClick: PropTypes.func,
|
|
};
|