feat: add radar labels

src/components/Radar/Radar.module.css

@@ -9,10 +9,16 @@
   max-width: 100%;
   height: auto;
   margin: 0 auto;
+  fill: currentColor;
+}
+
+.ringLabels {
+  text-transform: uppercase;
 }
 
 @media (max-width: 767px) {
-  .labels {
+  .labels,
+  .ringLabels {
     display: none;
   }
 }

src/components/Radar/Radar.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import React, { FC } from "react";
+import React, { FC, Fragment } from "react";
 
 import styles from "./Radar.module.css";
 
@@ -115,6 +115,37 @@ export const Radar: FC<RadarProps> = ({
     );
   };
 
+  const renderRingLabels = () => {
+    return rings.map((ring, index) => {
+      const outerRadius = ring.radius || 1;
+      const innerRadius = rings[index - 1]?.radius || 0;
+      const position = ((outerRadius + innerRadius) / 2) * center;
+
+      return (
+        <Fragment key={ring.id}>
+          <text
+            x={center + position}
+            y={center}
+            textAnchor="middle"
+            dominantBaseline="middle"
+            fontSize="12"
+          >
+            {ring.title}
+          </text>
+          <text
+            x={center - position}
+            y={center}
+            textAnchor="middle"
+            dominantBaseline="middle"
+            fontSize="12"
+          >
+            {ring.title}
+          </text>
+        </Fragment>
+      );
+    });
+  };
+
   return (
     <div className={styles.radar}>
       <svg
@@ -138,7 +169,8 @@ export const Radar: FC<RadarProps> = ({
             ))}
           </g>
         ))}
-        <g>{items.map((item) => renderItem(item))}</g>
+        <g className={styles.items}>{items.map((item) => renderItem(item))}</g>
+        <g className={styles.ringLabels}>{renderRingLabels()}</g>
       </svg>
       <div className={styles.labels}>
         {quadrants.map((quadrant) => (

src/components/RingList/RingList.module.css

@@ -22,11 +22,13 @@
 .list {
 }
 
-@media (min-width: 768px) {
+@media (min-width: 480px) {
   .ring {
     --cols: 2;
   }
+}
 
+@media (min-width: 768px) {
   .isSmall .ring {
     --cols: 4;
   }

src/styles/globals.css

@@ -67,7 +67,7 @@ h1,
 h2,
 h3,
 h4 {
-  line-height: 1.1em;
+  line-height: 1.2em;
   margin-bottom: 1em;
   font-weight: 700;
 }
@@ -77,6 +77,7 @@ h1 {
 }
 
 h2 {
+  font-weight: 400;
   font-size: 26px;
 }