@blocklet/ui-react/src/Footer/layout/row.jsx

Some useful front-end web components that can be used in Blocklets.

import PropTypes from 'prop-types';
import { Box } from '@mui/material';
import { styled } from '@arcblock/ux/lib/Theme';
import clsx from 'clsx';

export default function Row({ children = null, autoCenter = false, ...rest }) {
  if (!children) {
    return null;
  }
  return (
    <RowRoot {...rest} className={clsx(rest.className, { 'footer-row-auto-center': autoCenter })}>
      {children}
    </RowRoot>
  );
}

Row.propTypes = {
  children: PropTypes.any,
  autoCenter: PropTypes.bool,
};

const RowRoot = styled(Box)`
  display: flex;
  justify-content: space-between;
  & + & {
    margin-top: 24px;
  }
  &.footer-row-auto-center > *:only-child {
    margin: 0 auto;
  }

  ${({ theme }) => theme.breakpoints.down('md')} {
    align-items: stretch;
    flex-direction: column;
    gap: ${({ theme }) => theme.spacing(1)};
    > * {
      flex: 1 0 100%;
    }
    &.footer-row-auto-center > * {
      margin: 0 auto;
    }
  }
`;