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

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

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

import Row from './row';

/**
 * footer standard layout
 */
function StandardLayout({ elements, data, className = '', ...rest }) {
  const withNavigation = !!data.navigation?.length;

  let topSection = null;

  if (withNavigation) {
    // 左 brand & social，右导航栏
    topSection = (
      <Container sx={{ display: 'flex', flexDirection: { xs: 'column', md: 'row' }, justifyContent: 'space-between' }}>
        <Box
          sx={{
            flex: '1 1 auto',
            paddingRight: { xs: 0, md: 3 },
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'flex-start',
            gap: 2,
            pb: 3,
          }}>
          <Box>{elements.brand}</Box>
          <Box
            sx={{
              lineHeight: 1,
            }}>
            {elements.socialMedia}
          </Box>
        </Box>
        <Box sx={({ palette }) => ({ mb: 3, borderTop: { xs: `1px solid ${palette.grey[200]}`, md: 0 } })}>
          {elements.navigation}
        </Box>
      </Container>
    );
  } else {
    // 左 brand，右 social
    topSection = (
      <Container
        sx={{
          display: 'flex',
          flexDirection: { xs: 'column', md: 'row' },
          justifyContent: 'space-between',
          alignItems: 'space-between',
          gap: 2,
          pb: 3,
        }}>
        <Box>{elements.brand}</Box>
        <Box
          sx={{
            lineHeight: 1,
          }}>
          {elements.socialMedia}
        </Box>
      </Container>
    );
  }

  return (
    <Root {...rest} className={clsx({ 'footer--with-navs': withNavigation }, className)}>
      <Container style={{ padding: 0 }}>
        {topSection}
        {/* 分割线可以延伸 */}
        <Box sx={{ pt: 3, borderTop: 1, borderColor: 'divider' }} />
        <Container>
          <Row autoCenter>
            {elements.copyright}
            {elements.links}
          </Row>
        </Container>
      </Container>
    </Root>
  );
}

StandardLayout.propTypes = {
  elements: PropTypes.shape({
    brand: PropTypes.element,
    navigation: PropTypes.element,
    socialMedia: PropTypes.element,
    copyright: PropTypes.element,
    links: PropTypes.element,
  }).isRequired,
  data: PropTypes.object.isRequired,
  className: PropTypes.string,
};

const Root = styled('div')`
  padding: 32px 0 24px 0;
  .footer-brand-name,
  .footer-brand-desc {
    display: none;
  }
  &.footer--with-navs {
    ${(props) => props.theme.breakpoints.up('md')} {
      .footer-brand-desc {
        max-width: 360px;
        display: block;
      }
    }
  }
  && .footer-brand-logo {
    margin-right: 0;
  }
`;

export default StandardLayout;