@blocklet/ui-react/src/Footer/social-media.jsx

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

import PropTypes from 'prop-types';
import { styled } from '@arcblock/ux/lib/Theme';
import Icon from '../Icon';

export default function SocialMedia({ items = null, ...rest }) {
  if (!items?.length) {
    return null;
  }
  return (
    <Root {...rest}>
      {items.map((item, i) => {
        return (
          <a
            // eslint-disable-next-line react/no-array-index-key
            key={i}
            href={item.link}
            target="_blank"
            aria-label={`Social media icon${item.title ? ` for ${item.title}` : ''}`}
            rel="noreferrer">
            <Icon icon={item.icon || item.title} size={24} component="span" />
          </a>
        );
      })}
    </Root>
  );
}

SocialMedia.propTypes = {
  items: PropTypes.arrayOf(
    PropTypes.shape({
      // icon 对应 Icon#icon prop, 支持 iconify name 和 url 2 种形式:
      icon: PropTypes.string,
      link: PropTypes.string,
    })
  ),
};

const Root = styled('div')`
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  a {
    color: ${(props) => props.theme.palette.text.secondary};
    text-decoration: none;
    transition: color 0.2s ease-in-out;
    &:hover {
      color: ${({ theme }) => theme.palette.text.primary};
    }
  }
  ${(props) => props.theme.breakpoints.down('md')} {
    gap: 12px;
  }
`;