1
0
Fork 0
freesewing/sites/shared/components/designs/difficulty.mjs
2023-09-29 16:01:27 +02:00

23 lines
693 B
JavaScript

// __SDEFILE__ - This file is a dependency for the stand-alone environment
import { CircleIcon as Icon } from 'shared/components/icons.mjs'
import { useTheme } from 'shared/hooks/use-theme.mjs'
export const Circle = ({ off = false, color = 'warning' }) => (
<Icon fill={!off} className={`w-4 h-4 text-${color}`} />
)
const five = [0, 1, 2, 3, 4]
export const Difficulty = ({ score = 0, color = false }) => {
const { rating } = useTheme()
// Skip 0
const colors = ['violet', ...rating]
return (
<div className="flex flex-row">
{five.map((i) => (
<Circle key={i} color={color ? color : colors[score]} off={i < score ? false : true} />
))}
</div>
)
}