react/lib/components/attributes/attributes.tsx

import React, { useMemo } from 'react'
import { Card, Link, Spacer, Avatar, Tooltip, useTheme } from 'components'
import AttributesTitle from './attributes-title'
import VirtualAnchor from 'lib/components/anchor'
import { useConfigs } from '../../config-context'
import ContributorMetadatas from 'lib/data/contributors.json'
const GithubURL = 'https://github.com/zeit-ui/react/blob/master'

export interface AttributesProps {
  edit: string
}

export interface Contributor {
  name: string
  avatar: string
  url: string
}

export type ContributorMeta = {
  [key: string]: Array<Contributor>
}

const Attributes: React.FC<React.PropsWithChildren<AttributesProps>> = React.memo(({
  edit, children,
}) => {
  const theme = useTheme()
  const { isChinese } = useConfigs()
  const link = useMemo(() => `${GithubURL}${edit || '/pages'}`, [])
  const contributors = useMemo(() => {
    const key = edit.replace('/pages', 'pages')
    const users = (ContributorMetadatas as ContributorMeta)[key]
    return users || []
  }, [])
  
  return (
    <>
      <Spacer y={5} />
      <h3><VirtualAnchor>APIs</VirtualAnchor>{isChinese && ' / 接口文档'}</h3>
      <Card className="attr">
        {children}
      </Card>
      <Spacer y={3} />
      <h4 className="contributor-title">{isChinese ? '文档贡献者' : 'Contributors'}</h4>
      <div className="contributors">
        {contributors.map((user, index) => (
          <Tooltip text={<b>{user.name}</b>} key={`${user.url}-${index}`}>
            <Link color pure target="_blank" rel="nofollow" href={user.url}>
              <Avatar src={user.avatar} />
            </Link>
          </Tooltip>
        ))}
        <Tooltip text={isChinese ? '在 GitHub 上编辑此页面' : 'Edit this page on GitHub'} type="dark">
          <Link color pure target="_blank" rel="nofollow" href={link}>
            <Avatar text="Add" />
          </Link>
        </Tooltip>
      </div>
  
      <style global jsx>{`
        .attr table {
          margin-right: ${theme.layout.gap};
        }

        .attr pre {
          margin: 0;
        }
        
        .attr h4.title {
          margin-top: calc(${theme.layout.gap} * 2.2);
        }

        .attr h4.title:first-of-type {
          margin-top: 0;
        }
        
        .attr table {
          border-collapse: separate;
          border-spacing: 0;
          width: 100%;
        }
        
        .attr thead th td {
          height: 2.5rem;
        }
        
        .attr tbody tr td {
          height: 3.333rem;
        }
        
        .attr th, .attr td {
          padding: 0 0.625rem;
          text-align: left;
        }
        
        .attr th {
          height: 2.5rem;
          color: ${theme.palette.accents_5};;
          font-size: 0.75rem;
          font-weight: 400;
          letter-spacing: 0;
          background: ${theme.palette.accents_1};
          border-bottom: 1px solid ${theme.palette.border};
          border-top: 1px solid ${theme.palette.border};
        }
        
        .attr th:nth-child(1) {
          border-bottom: 1px solid ${theme.palette.border};
          border-left: 1px solid ${theme.palette.border};
          border-radius: 4px 0 0 4px;
          border-top: 1px solid ${theme.palette.border};
        }
        
        .attr th:last-child {
          border-bottom: 1px solid ${theme.palette.border};
          border-radius: 0 4px 4px 0;
          border-right: 1px solid ${theme.palette.border};
          border-top: 1px solid ${theme.palette.border};
        }
        
        .attr tr td {
          border-bottom: 1px solid ${theme.palette.border};
          color: ${theme.palette.accents_6};
          font-size: 0.875rem;
          height: 2.5rem;
        }
        
        .attr td:nth-child(1) {
          border-left: 1px solid transparent;
        }
        
        .contributor-title {
          text-transform: uppercase;
          font-size: 1rem;
          letter-spacing: 1.5px;
        }
        
        .contributors {
          padding-left: ${theme.layout.gap};
          padding-top: ${theme.layout.gap};
          max-width: 100%;
          height: auto;
          display: flex;
          flex-wrap: wrap;
        }
        
        .contributors :global(.tooltip) {
          margin-right: 3px;
        }
        
        @media only screen and (max-width: ${theme.layout.breakpointMobile}) {
          .attr {
            overflow-x: scroll;
          }
          
          .attr::-webkit-scrollbar {
            width: 0;
            height: 0;
            background-color: transparent;
          }
        }
      `}</style>
    </>
  )
})

type AttributesComponent<P = {}> = React.FC<P> & {
  Title: typeof AttributesTitle
}

export default Attributes as AttributesComponent<AttributesProps>