From 0c38e49b34fb3d26ef737871fe45ce15058b4aac Mon Sep 17 00:00:00 2001
From: Mathias Schopmans <mathias.schopmans@aoe.com>
Date: Mon, 26 Feb 2024 13:43:40 +0100
Subject: [PATCH] feat: add QuadrantLink

---
 .../QuadrantLink/QuadrantLink.module.css      | 20 +++++++++++++++
 src/components/QuadrantLink/QuadrantLink.tsx  | 25 +++++++++++++++++++
 .../QuadrantList/QuadrantList.module.css      |  3 +++
 src/components/QuadrantList/QuadrantList.tsx  |  2 ++
 src/components/Radar/Label.module.css         |  9 -------
 src/components/Radar/Label.tsx                |  7 ++----
 src/pages/[quadrant]/[id].module.css          | 14 ++++++-----
 src/pages/[quadrant]/[id].tsx                 |  6 +++++
 8 files changed, 66 insertions(+), 20 deletions(-)
 create mode 100644 src/components/QuadrantLink/QuadrantLink.module.css
 create mode 100644 src/components/QuadrantLink/QuadrantLink.tsx

diff --git a/src/components/QuadrantLink/QuadrantLink.module.css b/src/components/QuadrantLink/QuadrantLink.module.css
new file mode 100644
index 0000000..6c58f0c
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/components/QuadrantLink/QuadrantLink.tsx b/src/components/QuadrantLink/QuadrantLink.tsx
new file mode 100644
index 0000000..f0bc842
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/QuadrantList/QuadrantList.module.css b/src/components/QuadrantList/QuadrantList.module.css
index 14b294f..3d6b42c 100644
--- a/src/components/QuadrantList/QuadrantList.module.css
+++ b/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);
diff --git a/src/components/QuadrantList/QuadrantList.tsx b/src/components/QuadrantList/QuadrantList.tsx
index f0bea7a..aa5ab98 100644
--- a/src/components/QuadrantList/QuadrantList.tsx
+++ b/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>
diff --git a/src/components/Radar/Label.module.css b/src/components/Radar/Label.module.css
index 9a96970..539d11e 100644
--- a/src/components/Radar/Label.module.css
+++ b/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;
 }
diff --git a/src/components/Radar/Label.tsx b/src/components/Radar/Label.tsx
index 4375155..3db8737 100644
--- a/src/components/Radar/Label.tsx
+++ b/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}`}>
-          <Pie className={styles.icon} />
-          <span>Zoom in</span>
-        </Link>
+        <QuadrantLink quadrant={quadrant} />
       </div>
       <h3 className={styles.title}>{quadrant.title}</h3>
       <p className={styles.description}>{quadrant.description}</p>
diff --git a/src/pages/[quadrant]/[id].module.css b/src/pages/[quadrant]/[id].module.css
index c919be9..28bd52d 100644
--- a/src/pages/[quadrant]/[id].module.css
+++ b/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;
diff --git a/src/pages/[quadrant]/[id].tsx b/src/pages/[quadrant]/[id].tsx
index ea1d495..d806b8d 100644
--- a/src/pages/[quadrant]/[id].tsx
+++ b/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>