@elacity-js/uikit/dist/components/Button/MintButton.js

React / Material UI Design kit for Elacity project

import { __rest } from '../../node_modules/tslib/tslib.es6.js';
import { jsx } from 'react/jsx-runtime';
import { useNavigate } from 'react-router-dom';
import { IconButton } from '@mui/material';
import LoadingButton from '@mui/lab/LoadingButton';
import AddIcon from '@mui/icons-material/Add';
import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import { isMobile } from '@elacity-js/lib';
import img from '../../assets/shiny-stars.png.js';

const MintButton = (_a) => {
    var { onClick, responsive, label } = _a, props = __rest(_a, ["onClick", "responsive", "label"]);
    const theme = useTheme();
    const navigate = useNavigate();
    const isSmDown = useMediaQuery((t) => t.breakpoints.down('sm'));
    const isVerySmall = isMobile();
    const handleClick = () => {
        // if onClick handler is not defined, let's redirect to /new
        if (!onClick) {
            navigate('/new');
        }
        else {
            onClick();
        }
    };
    if (isVerySmall && responsive) {
        return (jsx(IconButton, Object.assign({ onClick: handleClick }, { children: jsx(AddIcon, {}) })));
    }
    return (jsx(LoadingButton, Object.assign({ onClick: handleClick, size: isSmDown ? 'small' : 'medium', variant: "contained", color: theme.palette.mode === 'light' ? 'primary' : 'secondary', endIcon: jsx("img", { src: img, alt: (label || 'Mint').toLowerCase(), style: { height: '23px' } }) }, props, { children: label || 'Create' })));
};

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