CountdownTimerRadial.tsx58 lines · main

1	import { PolarGrid, RadialBar, RadialBarChart } from 'recharts'
2	import { ChartConfig, ChartContainer } from 'ui'
3
4	interface CountdownTimerRadialProps {
5	progress: number
6	}
7
8	const chartConfig = {
9	timeRemaining: {
10	label: 'timeRemaining',
11	color: 'hsl(var(--warning-default))',
12	},
13	hand: {
14	label: 'hand',
15	color: 'hsl(var(--warning-default))',
16	},
17	} satisfies ChartConfig
18
19	const CountdownTimerRadial = ({ progress }: CountdownTimerRadialProps) => {
20	return (
21	<div className="relative w-12 h-12">
22	{/* timer ring */}
23	<ChartContainer config={chartConfig} className="absolute w-12 h-12">
24	<RadialBarChart
25	data={[{ timeRemaining: 100, fill: 'var(--color-timeRemaining)' }]}
26	startAngle={90}
27	endAngle={90 - (progress * 360) / 100}
28	innerRadius={21}
29	outerRadius={14}
30	>
31	<PolarGrid
32	gridType="circle"
33	radialLines={false}
34	stroke="none"
35	className="first:fill-foreground-muted/50 last:fill-background-200"
36	polarRadius={[16, 11]}
37	/>
38	<RadialBar dataKey="timeRemaining" cornerRadius={2} />
39	</RadialBarChart>
40	</ChartContainer>
41
42	<ChartContainer config={chartConfig} className="absolute top-1 left-1 w-10 h-10">
43	<RadialBarChart
44	data={[{ hand: 100, fill: 'var(--color-hand)' }]}
45	// Adjust the angles to create a small hand
46	startAngle={80 - (progress * 360) / 100}
47	endAngle={140 - (progress * 360) / 100}
48	innerRadius={14}
49	outerRadius={5}
50	>
51	<RadialBar dataKey="hand" cornerRadius={2} isAnimationActive={true} />
52	</RadialBarChart>
53	</ChartContainer>
54	</div>
55	)
56	}
57
58	export default CountdownTimerRadial