react/lib/components/attributes/attributes-title.tsx

import React from 'react'
import { Spacer, Code, useTheme } from 'components'
import VirtualAnchor from 'lib/components/anchor'
import { useConfigs } from 'lib/config-context'

export interface AttributesTitleProps {
  alias?: string
}

const getAlias = (isChinese: boolean, alias?: string) => {
  if (!alias) return null
  return (
    <small>
      <span>[</span>
      {isChinese ? '别名' : 'alias'}: <Code>{alias}</Code>
      <span>]</span>
    </small>
  )
}

const AttributesTitle: React.FC<React.PropsWithChildren<AttributesTitleProps>> = React.memo(
  ({ children, alias }) => {
    const theme = useTheme()
    const { isChinese } = useConfigs()

    return (
      <>
        <h4 className="title">
          <Code>
            <VirtualAnchor pure>{children}</VirtualAnchor>
          </Code>
          {getAlias(!!isChinese, alias)}
        </h4>
        <Spacer y={0.6} />

        <style jsx>{`
          h4 {
            display: inline-flex;
            align-items: center;
            height: 2rem;
            padding-left: ${theme.layout.gapQuarter};
            padding-right: ${theme.layout.gapHalf};
            background-color: ${theme.palette.accents_1};
            border-radius: ${theme.layout.radius};
          }

          h4 :global(small) {
            font-size: 0.65em;
            padding-left: 0.65rem;
            color: ${theme.palette.accents_4};
            align-self: flex-end;
            line-height: 1.6rem;
          }

          h4 :global(span) {
            color: ${theme.palette.accents_6};
          }
        `}</style>
      </>
    )
  },
)

export default AttributesTitle