feat: add radar labels

src/components/Radar/Label.module.css

@@ -0,0 +1,46 @@
+.label {
+  width: 240px;
+  min-height: 210px;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
+  margin: 0 0 15px;
+  border-bottom: 2px solid var(--quadrant-color);
+  text-transform: uppercase;
+  font-size: 12px;
+}
+
+.title {
+  margin: 0 0 10px;
+}
+
+.icon {
+  fill: var(--highlight);
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 5px 0 0;
+  width: 16px;
+  height: 16px;
+}
+
+.description {
+  font-size: 14px;
+}
+
+.position-2,
+.position-4 {
+  left: auto;
+  right: 0;
+}
+
+.position-3,
+.position-4 {
+  top: auto;
+  bottom: 0;
+}

src/components/Radar/Label.tsx

@@ -0,0 +1,36 @@
+import Link from "next/link";
+import { CSSProperties, useMemo } from "react";
+
+import styles from "./Label.module.css";
+
+import Pie from "@/components/Icons/Pie";
+import { Quadrant } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+interface LabelProps {
+  quadrant: Quadrant;
+}
+
+export function Label({ quadrant }: LabelProps) {
+  const style = useMemo(
+    () => ({ "--quadrant-color": quadrant.color }) as CSSProperties,
+    [quadrant.color],
+  );
+
+  return (
+    <div
+      className={cn(styles.label, styles[`position-${quadrant.position}`])}
+      style={style}
+    >
+      <div className={styles.header}>
+        <span>Quadrant {quadrant.position}</span>
+        <Link href={`/${quadrant.id}`}>
+          <Pie className={styles.icon} />
+          <span>Zoom in</span>
+        </Link>
+      </div>
+      <h3 className={styles.title}>{quadrant.title}</h3>
+      <p className={styles.description}>{quadrant.description}</p>
+    </div>
+  );
+}

src/components/Radar/Radar.module.css

@@ -10,3 +10,15 @@
   height: auto;
   margin: 0 auto;
 }
+
+@media (max-width: 767px) {
+  .labels {
+    display: none;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  .radar {
+    padding: 150px 15px;
+  }
+}

src/components/Radar/Radar.tsx

@@ -4,6 +4,7 @@ import React, { FC } from "react";
 import styles from "./Radar.module.css";
 
 import { Blip } from "@/components/Radar/Blip";
+import { Label } from "@/components/Radar/Label";
 import { Item, Quadrant, Ring } from "@/lib/types";
 
 export interface RadarProps {
@@ -139,6 +140,11 @@ export const Radar: FC<RadarProps> = ({
         ))}
         <g>{items.map((item) => renderItem(item))}</g>
       </svg>
+      <div className={styles.labels}>
+        {quadrants.map((quadrant) => (
+          <Label key={quadrant.id} quadrant={quadrant} />
+        ))}
+      </div>
     </div>
   );
 };