6f428b2297
Replaces framer-motion animation + custom SVG icons + admin-toast markup with MUI Snackbar + MUI Alert (filled variant). useAlertState() consumption (alerts array, removeAlert) is preserved verbatim — alert lifecycle (timing, types, auto-dismiss) is owned by AlertContext and unchanged. Alerts stack bottom-right with 72px vertical offset per slot. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
30 lines
778 B
TypeScript
30 lines
778 B
TypeScript
import Snackbar from "@mui/material/Snackbar";
|
|
import MuiAlert from "@mui/material/Alert";
|
|
import { useAlertState } from "../context/AlertContext";
|
|
|
|
export default function AlertContainer() {
|
|
const { alerts, removeAlert } = useAlertState();
|
|
|
|
return (
|
|
<>
|
|
{alerts.map((alert, index) => (
|
|
<Snackbar
|
|
key={alert.id}
|
|
open
|
|
anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
|
|
sx={{ bottom: { xs: 16 + index * 72 } }}
|
|
>
|
|
<MuiAlert
|
|
severity={alert.type}
|
|
onClose={() => removeAlert(alert.id)}
|
|
variant="filled"
|
|
sx={{ width: "100%", minWidth: 280 }}
|
|
>
|
|
{alert.message}
|
|
</MuiAlert>
|
|
</Snackbar>
|
|
))}
|
|
</>
|
|
);
|
|
}
|