@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
74 lines (73 loc) • 3.16 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { InfoSize16Px } from '@coveord/plasma-react-icons';
import { Box, ColorSwatch, Flex, Group, Stack, Text, Title, Tooltip, useMantineTheme } from '@mantine/core';
import cx from 'clsx';
import BrowserPreviewClasses from './BrowserPreview.module.css';
export const BrowserPreview = ({ children, headerTooltip, title, className, ...others })=>{
const theme = useMantineTheme();
return /*#__PURE__*/ _jsxs(Stack, {
className: cx(BrowserPreviewClasses.root, className),
gap: 0,
maw: 544,
mih: 0,
...others,
children: [
/*#__PURE__*/ _jsx(Box, {
children: /*#__PURE__*/ _jsxs(Group, {
className: BrowserPreviewClasses.header,
justify: "space-between",
px: "sm",
py: "xs",
bg: "gray.1",
children: [
/*#__PURE__*/ _jsxs(Group, {
gap: "xs",
children: [
/*#__PURE__*/ _jsx(Title, {
c: "gray.6",
order: 4,
children: "Preview"
}),
!!headerTooltip && /*#__PURE__*/ _jsx(Tooltip, {
label: headerTooltip,
position: "right",
maw: 400,
children: /*#__PURE__*/ _jsx(InfoSize16Px, {
height: 16,
className: BrowserPreviewClasses.infoIcon
})
})
]
}),
/*#__PURE__*/ _jsx(Text, {
lineClamp: 1,
color: "gray.6",
children: title
}),
/*#__PURE__*/ _jsxs(Group, {
gap: "xs",
children: [
/*#__PURE__*/ _jsx(ColorSwatch, {
color: theme.colors.gray[3]
}),
/*#__PURE__*/ _jsx(ColorSwatch, {
color: theme.colors.gray[3]
}),
/*#__PURE__*/ _jsx(ColorSwatch, {
color: theme.colors.gray[3]
})
]
})
]
})
}),
/*#__PURE__*/ _jsx(Flex, {
className: BrowserPreviewClasses.content,
p: "xl",
direction: "column",
children: children
})
]
});
};
//# sourceMappingURL=BrowserPreview.js.map