freesewing/packages/react/components/Control/index.mjs

import React from 'react'
import { controlDesc } from '@freesewing/config'
import { BulletIcon } from '@freesewing/react/components/Icon'

export const ControlScore = ({ control, color = 'base-content' }) =>
  control ? (
    <div className={`tw:flex tw:flex-row tw:items-center tw:text-${color}`}>
      {Object.keys(controlDesc).map((score) => (
        <BulletIcon
          fill={control >= score ? true : false}
          className="tw:w-6 tw:h-6 tw:-ml-1"
          key={score}
        />
      ))}
    </div>
  ) : null