jeet/grateful-journal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clock ui update

Browse Source
This commit is contained in:
Jeet Debnath
2026-04-21 10:49:13 +05:30
parent 11d8e5daa6
commit 9f944e531a
1 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/ClockTimePicker.tsx
View File

@@ -238,17 +238,24 @@ export default function ClockTimePicker({ value, onChange, disabled }: Props) {
<circle cx={handTip.x} cy={handTip.y} r={TIP_RADIUS} className="clock-picker__hand-tip" /> <circle cx={handTip.x} cy={handTip.y} r={TIP_RADIUS} className="clock-picker__hand-tip" />
{mode === 'hours' && hourPositions.map(({ h, x, y }) => ( {mode === 'hours' && hourPositions.map(({ h, x, y }) => (
h === selectedNum ? null :
<text key={h} x={x} y={y} textAnchor="middle" dominantBaseline="central" <text key={h} x={x} y={y} textAnchor="middle" dominantBaseline="central"
className={`clock-picker__num${h === selectedNum ? ' clock-picker__num--selected' : ''}`} className="clock-picker__num"
>{h}</text> >{h}</text>
))} ))}
{mode === 'minutes' && minutePositions.map(({ m, x, y }) => ( {mode === 'minutes' && minutePositions.map(({ m, x, y }) => (
m === selectedNum ? null :
<text key={m} x={x} y={y} textAnchor="middle" dominantBaseline="central" <text key={m} x={x} y={y} textAnchor="middle" dominantBaseline="central"
className={`clock-picker__num${m === selectedNum ? ' clock-picker__num--selected' : ''}`} className="clock-picker__num"
>{m.toString().padStart(2, '0')}</text> >{m.toString().padStart(2, '0')}</text>
))} ))}
{/* Selected number rendered at hand tip so it sits centered in the green circle */}
<text x={handTip.x} y={handTip.y} textAnchor="middle" dominantBaseline="central"
className="clock-picker__num clock-picker__num--selected"
>{mode === 'hours' ? selectedNum : selectedNum.toString().padStart(2, '0')}</text>
{mode === 'minutes' && Array.from({ length: 60 }, (_, i) => { {mode === 'minutes' && Array.from({ length: 60 }, (_, i) => {
if (i % 5 === 0) return null if (i % 5 === 0) return null
const angle = (i / 60) * 360 const angle = (i / 60) * 360