QueryInsightsHealthScore.tsx33 lines · main

1	export const QueryInsightsHealthScore = ({
2	score,
3	color,
4	label,
5	}: {
6	score: number
7	color: string
8	label: string
9	}) => (
10	<>
11	<div
12	className="h-12 w-12 rounded-full flex items-center justify-center"
13	style={{
14	background: `conic-gradient(${color} ${score * 3.6}deg, hsl(var(--border-default)) ${score * 3.6}deg)`,
15	}}
16	>
17	<div
18	className="h-10 w-10 rounded-full bg-studio flex items-center justify-center text-base font-medium"
19	style={{ color }}
20	>
21	{score}
22	</div>
23	</div>
24	<div className="flex flex-col">
25	<span className="text-xs text-foreground-lighter uppercase font-mono tracking-wider">
26	Health Score
27	</span>
28	<span className="text-xl text-foreground-light" style={{ color }}>
29	{label}
30	</span>
31	</div>
32	</>
33	)