@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
83 lines (82 loc) • 4.32 kB
JavaScript
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
exports.EnvironmentBanner = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const ButtonNaked_1 = require("../ButtonNaked");
const Close_1 = tslib_1.__importDefault(require("@mui/icons-material/Close"));
const material_1 = require("@mui/material");
const colors_1 = require("../../theme/colors");
const COLOR_MAP = {
white: {
bg: 'background.paper',
border: colors_1.divider,
icon: colors_1.decorativeIcon,
text: colors_1.neutral.black,
action: colors_1.blue[500],
},
info: {
bg: colors_1.blue[50],
border: colors_1.blue[100],
icon: colors_1.blue[200],
text: colors_1.neutral.black,
action: colors_1.blue[500],
},
warning: {
bg: colors_1.warning[100],
border: colors_1.warning[400],
icon: colors_1.warning[850],
text: colors_1.warning[850],
action: colors_1.warning[850],
},
};
const EnvironmentBanner = ({ bgColor = 'white', title, message, icon, onClose, actionButton, }) => {
var _a;
const theme = (0, material_1.useTheme)();
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
const variant = COLOR_MAP[bgColor];
return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { position: 'relative' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ icon: false, sx: {
position: 'relative',
borderRadius: '8px',
borderLeft: 'none',
backgroundColor: variant.bg,
border: `1px solid ${variant.border}`,
color: variant.text,
} }, (onClose && {
action: ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: onClose, sx: {
position: 'absolute',
top: 8,
right: 8,
color: COLOR_MAP.white.text,
} }, { children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }))),
}), { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
display: 'flex',
flexDirection: isMobile ? 'column' : 'row',
alignItems: isMobile ? 'center' : 'flex-start',
gap: 2,
flex: 1,
} }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: {
color: variant.icon,
} }, { children: icon })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
display: 'flex',
flexDirection: 'column',
gap: 1,
flex: 1,
alignItems: isMobile ? 'center' : 'flex-start',
} }, { children: [title && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", component: "div", sx: {
fontWeight: 'fontWeightMedium',
fontSize: { xs: '1rem', sm: '1.125rem' },
textAlign: isMobile ? 'center' : 'left',
} }, { children: title }))), message && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", sx: {
color: variant.text,
textAlign: isMobile ? 'center' : 'left',
} }, { children: message }))), actionButton && ((0, jsx_runtime_1.jsx)(ButtonNaked_1.ButtonNaked, Object.assign({ onClick: actionButton.onClick, sx: {
alignSelf: isMobile ? 'center' : 'flex-start',
fontWeight: 'fontWeightMedium',
p: 0,
minWidth: 'auto',
color: (_a = actionButton.color) !== null && _a !== void 0 ? _a : variant.action,
} }, { children: actionButton.label })))] }))] })) })) })));
};
exports.EnvironmentBanner = EnvironmentBanner;