@elacity-js/uikit/dist/layouts/Footer/ElastosMark.js

React / Material UI Design kit for Elacity project

import { jsx, jsxs } from 'react/jsx-runtime';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { styled, useTheme } from '@mui/material/styles';

const ImgLogo = styled('img')(({ theme }) => ({
    width: 95,
    height: 20,
    marginLeft: theme.spacing(1),
    marginTop: theme.spacing(0.3),
}));
const Container = styled(Box, {
    name: 'ElastosMark',
    slot: 'Root',
    shouldForwardProp: (prop) => !['position'].includes(prop),
})(({ theme, position }) => ({
    textAlign: 'center',
    paddingTop: theme.spacing(2),
    paddingBottom: theme.spacing(1),
    position: position || 'absolute',
    bottom: 0,
    width: '100%',
    left: 0,
}));
const ElastosMark = ({ position }) => {
    const theme = useTheme();
    const mode = theme.palette.mode === 'light' ? 'dark' : 'light';
    return (jsx(Container, Object.assign({ position: position }, { children: jsxs(Box, Object.assign({ sx: {
                display: 'flex',
                justifyContent: 'center',
                padding: theme.spacing(2),
                width: '100%',
            } }, { children: [jsx(Typography, { children: "Powered by" }), jsx(ImgLogo, { src: `/logo-elastos-${mode}.png`, alt: "elastos" })] })) })));
};

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