@blocklet/ui-react/src/Footer/brand.jsx

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

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

export default function Brand({ name = '', logo = '', description = '', ...rest }) {
  if (!name && !logo && !description) {
    return null;
  }

  const logoElement = isValidElement(logo) ? logo : <img src={logo} alt={name} />;

  return (
    <Root {...rest}>
      <div>
        {logo && (
          <Box component="a" href="/" className="footer-brand-logo">
            {logoElement}
          </Box>
        )}
        {name && <div className="footer-brand-name">{name}</div>}
      </div>
      {description && <div className="footer-brand-desc">{description}</div>}
    </Root>
  );
}

Brand.propTypes = {
  name: PropTypes.node,
  logo: PropTypes.node,
  description: PropTypes.string,
};

const Root = styled('div')`
  display: flex;
  flex-direction: column;
  font-size: 14px;
  a {
    text-decoration: none;
    color: inherit;
  }
  > div:first-of-type {
    display: flex;
    align-items: center;
  }
  .footer-brand-logo {
    display: flex;
    align-items: center;
    margin-right: 12px;
    line-height: 1;
    img,
    svg {
      width: auto;
      height: 40px;
      max-height: 40px;
    }
  }
  .footer-brand-name {
    font-size: 18px;
    color: ${(props) => props.theme.palette.grey[900]};
  }
  .footer-brand-desc {
    white-space: pre-line;
    margin-top: 16px;
    color: ${(props) => props.theme.palette.text.secondary};
  }

  ${(props) => props.theme.breakpoints.down('sm')} {
    width: auto;
  }

  ${(props) => props.theme.breakpoints.down('md')} {
    .footer-brand-logo {
      img,
      svg {
        height: 32px;
        max-height: 32px;
      }
    }
  }
`;