Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 9x 9x 9x 9x 9x 9x 27x 27x 27x 27x 27x 27x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x | 'use client'
import { useMemo } from 'react'
import { useStartPracticeModal, PART_TYPES } from '../StartPracticeModalContext'
import { ProportionBar, type ProportionBarSegment } from './ProportionBar'
/** All practice mode segments use green tones */
const GREEN_COLORS: ProportionBarSegment['colors'] = {
lightBg: 'rgba(22, 163, 74, 0.08)',
lightBgBoosted: 'rgba(22, 163, 74, 0.15)',
darkBg: 'rgba(34, 197, 94, 0.15)',
darkBgBoosted: 'rgba(34, 197, 94, 0.25)',
lightAccent: '#16a34a',
darkAccent: '#4ade80',
}
export function PracticeModesSelector() {
const { partWeights, cyclePartWeight, disablePart, problemsPerType, enabledPartCount } =
useStartPracticeModal()
const segments = useMemo<ProportionBarSegment[]>(
() =>
PART_TYPES.map(({ type, emoji, label }) => ({
key: type,
emoji,
label,
weight: partWeights[type],
badgeContent: partWeights[type] > 0 ? problemsPerType[type] : undefined,
colors: GREEN_COLORS,
})),
[partWeights, problemsPerType]
)
return (
<ProportionBar
label="Practice Modes"
dataSetting="practice-modes"
segments={segments}
onCycleWeight={(key) => cyclePartWeight(key as keyof typeof partWeights)}
onDisable={(key) => disablePart(key as keyof typeof partWeights)}
enabledCount={enabledPartCount}
/>
)
}
|