@elacity-js/uikit/dist/components/NumberLabel.js

React / Material UI Design kit for Elacity project

import { __rest } from '../node_modules/tslib/tslib.es6.js';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { styled, lighten } from '@mui/material/styles';
import { Box, Skeleton, Typography } from '@mui/material';

const RootStyle = styled(Box)(({ theme }) => ({
    boxShadow: 'none',
    textAlign: 'center',
    padding: theme.spacing(1, 0),
    cursor: 'default',
    '& *': {
        animate: 'all ease-out 1s',
        transition: 'all 200ms',
    },
    '& .label': {
        opacity: 0.6,
    },
    '&:hover': {
        '& .label': Object.assign({ opacity: 1 }, theme.gardientText(105, [theme.palette.primary.main, 0], [lighten(theme.palette.vivid.dark, 0.2), 100])),
    },
}));
function NumberLabel(_a) {
    var { value, label, loading, children, minWidth } = _a, props = __rest(_a, ["value", "label", "loading", "children", "minWidth"]);
    return (jsxs(RootStyle, Object.assign({}, props, { children: [loading ? (jsx(Skeleton, { height: 75, sx: { minWidth: minWidth || 120 } })) : (jsx(Fragment, { children: typeof value !== 'undefined' && (jsx(Typography, Object.assign({ className: "num", variant: "h2" }, { children: value }))) })), children, jsx(Typography, Object.assign({ className: "label", variant: "subtitle2" }, { children: label }))] })));
}

export { NumberLabel as default };
//# sourceMappingURL=NumberLabel.js.map