24 lines
752 B
JavaScript
24 lines
752 B
JavaScript
import React from 'react'
|
|
import { controlDesc } from '@freesewing/config'
|
|
import { BulletIcon } from '@freesewing/react/components/Icon'
|
|
|
|
/**
|
|
* A component to render a visualisation of the user's control/UX setting
|
|
*
|
|
* @component
|
|
* @param {object} props - All component props
|
|
* @param {number} props.control - The user's control setting (a number)
|
|
* @returns {JSX.Element}
|
|
*/
|
|
export const ControlScore = ({ control }) =>
|
|
control ? (
|
|
<div className={`tw:flex tw:flex-row tw:items-center tw:text-base-content`}>
|
|
{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
|