feat: add QuadrantLink

src/components/QuadrantLink/QuadrantLink.module.css

@@ -0,0 +1,20 @@
+.link {
+  text-transform: uppercase;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.icon {
+  fill: var(--highlight);
+  display: inline-block;
+  vertical-align: middle;
+  margin: -2px 6px 0 0;
+  width: 16px;
+  height: 16px;
+}
+
+.link:hover {
+  .label {
+    text-decoration: underline;
+  }
+}

src/components/QuadrantLink/QuadrantLink.tsx

@@ -0,0 +1,25 @@
+import Link from "next/link";
+
+import styles from "./QuadrantLink.module.css";
+
+import Pie from "@/components/Icons/Pie";
+import { Quadrant } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+interface QuadrantLinkProps {
+  quadrant: Quadrant;
+  label?: string;
+  className?: string;
+}
+export function QuadrantLink({
+  quadrant,
+  label = "Zoom in",
+  className,
+}: QuadrantLinkProps) {
+  return (
+    <Link className={cn(styles.link, className)} href={`/${quadrant.id}`}>
+      <Pie className={styles.icon} />
+      <span className={styles.label}>{label}</span>
+    </Link>
+  );
+}

src/components/QuadrantList/QuadrantList.module.css

@@ -16,6 +16,9 @@
 }
 
 .header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   padding: 10px 0;
   margin-bottom: 20px;
   border-bottom: 1px solid var(--border);

src/components/QuadrantList/QuadrantList.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 
 import styles from "./QuadrantList.module.css";
 
+import { QuadrantLink } from "@/components/QuadrantLink/QuadrantLink";
 import { RingList } from "@/components/RingList/RingList";
 import { getQuadrant, groupItemsByQuadrant } from "@/lib/data";
 import { Item } from "@/lib/types";
@@ -23,6 +24,7 @@ export function QuadrantList({ items }: RingListProps) {
               <h3 className={styles.title}>
                 <Link href={`/${quadrant.id}`}>{quadrant.title}</Link>
               </h3>
+              <QuadrantLink quadrant={quadrant} />
             </div>
             <RingList items={items} size="small" />
           </li>

src/components/Radar/Label.module.css

@@ -20,15 +20,6 @@
   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;
 }

src/components/Radar/Label.tsx

@@ -3,7 +3,7 @@ import { CSSProperties, useMemo } from "react";
 
 import styles from "./Label.module.css";
 
-import Pie from "@/components/Icons/Pie";
+import { QuadrantLink } from "@/components/QuadrantLink/QuadrantLink";
 import { Quadrant } from "@/lib/types";
 import { cn } from "@/lib/utils";
 
@@ -24,10 +24,7 @@ export function Label({ quadrant }: LabelProps) {
     >
       <div className={styles.header}>
         <span>Quadrant {quadrant.position}</span>
-        <Link href={`/${quadrant.id}`}>
+        <QuadrantLink quadrant={quadrant} />
-          <Pie className={styles.icon} />
-          <span>Zoom in</span>
-        </Link>
       </div>
       <h3 className={styles.title}>{quadrant.title}</h3>
       <p className={styles.description}>{quadrant.description}</p>

src/pages/[quadrant]/[id].module.css

@@ -1,13 +1,15 @@
-.layout {
-}
-
-.sidebar {
-}
-
 .content {
   margin-bottom: 60px;
 }
 
+.ringAndQuadrant {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 20px;
+  border-bottom: 1px solid var(--border);
+}
+
 @media (min-width: 1024px) {
   .layout {
     display: flex;

src/pages/[quadrant]/[id].tsx

@@ -7,6 +7,7 @@ import styles from "./[id].module.css";
 import { RingBadge } from "@/components/Badge/Badge";
 import { ItemDetail } from "@/components/ItemDetail/ItemDetail";
 import { ItemList } from "@/components/ItemList/ItemList";
+import { QuadrantLink } from "@/components/QuadrantLink/QuadrantLink";
 import {
   getItem,
   getItems,
@@ -42,6 +43,11 @@ const ItemPage: CustomPage = () => {
         </section>
         <aside className={styles.sidebar}>
           <h3>{quadrant.title}</h3>
+          <div className={styles.ringAndQuadrant}>
+            <RingBadge ring={item.ring} />
+            <QuadrantLink quadrant={quadrant} label="Quadrant Overview" />
+          </div>
+
           <ItemList items={relatedItems} activeId={item.id} />
         </aside>
       </div>