2023-05-01 18:27:06 +02:00
|
|
|
import { CircleIcon as Icon } from 'shared/components/icons.mjs'
|
|
|
|
|
|
|
|
export const Circle = ({ off = false, color = 'warning' }) => (
|
|
|
|
<Icon fill={!off} className={`w-4 h-4 text-${color}`} />
|
|
|
|
)
|
|
|
|
|
|
|
|
const colors = ['violet', 'green-500', 'yellow-300', 'amber-500', 'orange-500', 'red-500']
|
|
|
|
|
|
|
|
const five = [0, 1, 2, 3, 4]
|
|
|
|
|
2023-06-01 09:06:11 +02:00
|
|
|
export const Difficulty = ({ score = 0, color = false }) => (
|
2023-05-01 18:27:06 +02:00
|
|
|
<div className="flex flex-row">
|
|
|
|
{five.map((i) => (
|
2023-06-01 09:06:11 +02:00
|
|
|
<Circle key={i} color={color ? color : colors[score]} off={i < score ? false : true} />
|
2023-05-01 18:27:06 +02:00
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
)
|