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

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

import { cloneElement } from 'react';
import PropTypes from 'prop-types';
import { Container } from '@mui/material';
import { styled } from '@arcblock/ux/lib/Theme';
import Row from './row';

/**
 * footer plain layout
 */
function PlainLayout({ elements, data, ...rest }) {
  return (
    <Root {...rest}>
      <Container style={{ padding: 0 }}>
        <Container className="plain-layout-container">
          {elements.links && (
            <Row sx={{ width: 1 }} autoCenter>
              {elements.copyright}
              {elements.links}
            </Row>
          )}
          {!elements.links && (
            <>
              {cloneElement(elements.brand, { name: null, description: null })}
              {elements.copyright}
            </>
          )}
        </Container>
      </Container>
    </Root>
  );
}

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

const Root = styled('div')`
  padding: 24px 0;
  .plain-layout-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }
`;

export default PlainLayout;