feat: add QuadrantList and RingList to render items on homepage and quadrant page

src/components/Badge/Badge.module.css

@@ -7,6 +7,7 @@
   border: 1px solid transparent;
   border-radius: 13px;
   font-size: 12px;
+  line-height: 1;
   overflow: hidden;
   text-decoration: none;
 }

src/components/Badge/Badge.tsx

@@ -28,8 +28,11 @@ export function Badge({
     () => (color ? ({ "--badge": color } as CSSProperties) : undefined),
     [color],
   );
+
+  const Component = props.onClick ? "button" : "span";
+
   return (
-    <button
+    <Component
       {...props}
       style={style}
       className={cn(
@@ -40,7 +43,7 @@ export function Badge({
       )}
     >
       {children}
-    </button>
+    </Component>
   );
 }
 

src/components/ItemList/ItemList.module.css

@@ -29,3 +29,11 @@
     opacity: 1;
   }
 }
+
+.isSmall {
+  font-size: 14px;
+
+  .link {
+    padding: 8px;
+  }
+}

src/components/ItemList/ItemList.tsx

@@ -6,14 +6,25 @@ import { FlagBadge } from "@/components/Badge/Badge";
 import { Item } from "@/lib/types";
 import { cn } from "@/lib/utils";
 
-interface ItemListProps {
+export interface ItemListProps {
   items: Item[];
   activeId?: string;
+  size?: "small" | "default";
+  className?: string;
 }
 
-export function ItemList({ items, activeId }: ItemListProps) {
+export function ItemList({
+  items,
+  activeId,
+  size = "default",
+  className,
+}: ItemListProps) {
   return (
-    <ul className={styles.list}>
+    <ul
+      className={cn(styles.list, className, {
+        [styles.isSmall]: size === "small",
+      })}
+    >
       {items.map((item) => (
         <li className={styles.item} key={item.id}>
           <Link
@@ -24,7 +35,11 @@ export function ItemList({ items, activeId }: ItemListProps) {
             href={`/${item.quadrant}/${item.id}`}
           >
             {item.title}
-            <FlagBadge className={styles.flag} flag={item.flag} />
+            <FlagBadge
+              className={styles.flag}
+              flag={item.flag}
+              short={size == "small"}
+            />
           </Link>
         </li>
       ))}

src/components/QuadrantList/QuadrantList.module.css

@@ -0,0 +1,35 @@
+.quadrants {
+  --cols: 1;
+  --gap: 60px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap);
+}
+
+.quadrant {
+  margin-bottom: 20px;
+  flex: 1 0
+    calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
+}
+
+.header {
+  padding: 10px 0;
+  margin-bottom: 20px;
+  border-bottom: 1px solid var(--border);
+}
+
+.title {
+  margin: 0;
+}
+
+.link {
+}
+
+@media (min-width: 1024px) {
+  .quadrant {
+    --cols: 2;
+  }
+}

src/components/QuadrantList/QuadrantList.tsx

@@ -0,0 +1,36 @@
+import Link from "next/link";
+
+import styles from "./QuadrantList.module.css";
+
+import { RingList } from "@/components/RingList/RingList";
+import {
+  getQuadrant,
+  groupItemsByQuadrant,
+  groupItemsByRing,
+} from "@/lib/data";
+import { Item } from "@/lib/types";
+
+interface RingListProps {
+  items: Item[];
+}
+export function QuadrantList({ items }: RingListProps) {
+  const quadrants = groupItemsByQuadrant(items);
+  return (
+    <ul className={styles.quadrants}>
+      {Object.entries(quadrants).map(([quadrantId, items]) => {
+        const quadrant = getQuadrant(quadrantId);
+        if (!quadrant) return null;
+        return (
+          <li key={quadrantId} className={styles.quadrant}>
+            <div className={styles.header}>
+              <h3 className={styles.title}>
+                <Link href={`/${quadrant.id}`}>{quadrant.title}</Link>
+              </h3>
+            </div>
+            <RingList items={items} size="small" />
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

src/components/RingList/RingList.module.css

@@ -0,0 +1,39 @@
+.rings {
+  --cols: 1;
+  --gap: 30px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap);
+}
+
+.ring {
+  margin-bottom: 20px;
+  flex: 1 0
+    calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
+}
+
+.badge {
+  margin-bottom: 20px;
+}
+
+.list {
+}
+
+@media (min-width: 768px) {
+  .ring {
+    --cols: 2;
+  }
+
+  .isSmall .ring {
+    --cols: 4;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ring {
+    --cols: 4;
+  }
+}

src/components/RingList/RingList.tsx

@@ -0,0 +1,27 @@
+import styles from "./RingList.module.css";
+
+import { RingBadge } from "@/components/Badge/Badge";
+import { ItemList, ItemListProps } from "@/components/ItemList/ItemList";
+import { groupItemsByRing } from "@/lib/data";
+import { Item } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+interface RingListProps {
+  items: Item[];
+  size?: ItemListProps["size"];
+}
+export function RingList({ items, size }: RingListProps) {
+  const rings = groupItemsByRing(items);
+  return (
+    <ul className={cn(styles.rings, { [styles.isSmall]: size == "small" })}>
+      {Object.entries(rings).map(([ring, items]) => {
+        return (
+          <li key={ring} className={styles.ring}>
+            <RingBadge className={styles.badge} ring={ring} />
+            <ItemList className={styles.list} items={items} size={size} />
+          </li>
+        );
+      })}
+    </ul>
+  );
+}