A vibe coded tangled fork which supports pijul.
1import type { Language } from "../../validation";
2
3interface LanguageCirclesProps {
4 languages: Language[];
5}
6
7const MAX_RADIUS = 380;
8
9function percentageToThickness(percentage: number): number {
10 return (percentage / 100) * MAX_RADIUS;
11}
12
13export function LanguageCircles({ languages }: LanguageCirclesProps) {
14 const sortedLanguages = [...languages]
15 .sort((a, b) => b.percentage - a.percentage)
16 .slice(0, 5)
17 .reverse();
18
19 let cumulativeRadius = 0;
20
21 return (
22 <div
23 style={{
24 position: "absolute",
25 right: -MAX_RADIUS,
26 top: -MAX_RADIUS,
27 width: MAX_RADIUS * 2,
28 height: MAX_RADIUS * 2,
29 display: "flex",
30 }}>
31 {sortedLanguages.map((lang, i) => {
32 const thickness = percentageToThickness(lang.percentage);
33 const contentSize = cumulativeRadius * 2;
34
35 cumulativeRadius += thickness;
36
37 return (
38 <div
39 key={i}
40 style={{
41 position: "absolute",
42 left: "50%",
43 top: "50%",
44 transform: "translate(-50%, -50%)",
45 width: contentSize,
46 height: contentSize,
47 borderRadius: "50%",
48 border: `${thickness}px solid ${lang.color}`,
49 boxSizing: "content-box",
50 }}
51 />
52 );
53 })}
54 </div>
55 );
56}