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

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

const propTypes = {
  stringNumber: PropTypes.number.isRequired,
}

type Props = PropTypes.InferProps<typeof propTypes>

const FretboardString: React.FC<Props> = ({
  stringNumber,
}) => (
  <span
    style={{
      display: 'block',
      width: '100%',
      height: `${0.03125 + stringNumber * 0.03125}rem`,
      backgroundColor: 'currentColor',
    }}
  />
)

FretboardString.propTypes = propTypes

export default FretboardString