feat: add QuadrantLink

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>