react-fretboard/src/components/Fret/Fret.tsx

import * as React from 'react'
import * as PropTypes from 'prop-types'

const propTypes = {
  fretNumber: PropTypes.number.isRequired,
  totalFrets: PropTypes.number.isRequired,
  firstString: PropTypes.bool,
  strings: PropTypes.number.isRequired,
  landmarks: PropTypes.bool,
  fretted: PropTypes.bool,
  capoFret: PropTypes.number,
  name: PropTypes.string,
}

type Props = PropTypes.InferProps<typeof propTypes>

const Fret: React.FC<Props> = ({
  fretNumber,
  totalFrets,
  children,
  firstString,
  strings,
  landmarks = false,
  fretted = false,
  capoFret = 0,
  name,
}) => (
  <div
    style={{
      display: 'block',
      position: 'relative',
      width: fretNumber > 0 ? `${(totalFrets - fretNumber) / 12 * 100 + 100}%` : '0.5rem',
      height: '1rem',
      flexShrink: fretNumber > 0 ? undefined : 0,
      padding: 0,
      borderWidth: '0 0.0625rem',
      borderStyle: 'none solid',
    }}
  >
    {
      landmarks
      && (fretNumber % 12 === 3 || fretNumber % 12 === 5 || fretNumber % 12 === 7 || fretNumber % 12 === 9 || fretNumber % 12 === 0)
      && fretNumber > 0
      && firstString
      && (
        <div
          style={{
            position: 'absolute',
            top: 0,
            height: `${strings! * 100}%`,
            width: '100%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-around',
            flexDirection: 'column',
          }}
        >
          <div
            style={{
              width: '0.75rem',
              height: '0.75rem',
              backgroundColor: 'currentColor',
              opacity: 0.5,
              borderRadius: '50%',
            }}
          />
          {fretNumber > 0 && fretNumber % 12 === 0 && (
            <div
              style={{
                width: '0.75rem',
                height: '0.75rem',
                backgroundColor: 'currentColor',
                opacity: 0.5,
                borderRadius: '50%',
              }}
            />
          )}
        </div>
      )
    }
    <div
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
      }}
    >
      {children}
    </div>
    {
      fretted
      && (
        <div
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            height: '100%',
            width: '100%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-around',
            flexDirection: 'column',
            color: 'red',
            zIndex: 1,
          }}
        >
          <div
            style={{
              display: 'grid',
              placeContent: 'center',
              width: name ? '2rem' : '0.75rem',
              height: name ? '1.5rem' : '0.75rem',
              backgroundColor: 'currentColor',
              borderRadius: name ? '0.75rem' : '0.375rem',
            }}
          >
            <div
              style={{
                color: 'white',
              }}
            >
              {name}
            </div>
          </div>
        </div>
      )
    }
    {
      fretNumber > 0
      && capoFret === fretNumber
      && firstString
      && (
        <div
          style={{
            position: 'absolute',
            top: 0,
            height: `${strings! * 100}%`,
            width: '100%',
          }}
        >
          <div
            style={{
              margin: '0 auto',
              width: '0.75rem',
              height: '100%',
              backgroundColor: 'currentColor',
              borderRadius: '0.375rem',
            }}
          />
        </div>
      )
    }
  </div>
)

Fret.propTypes = propTypes

export default Fret