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>
+  );
+}

src/lib/data.ts

@@ -36,8 +36,11 @@ export function getQuadrant(id: string): Quadrant | undefined {
   return getQuadrants().find((q) => q.id === id);
 }
 
-export function getItems(featured?: boolean): Item[] {
+export function getItems(quadrant?: string, featured?: boolean): Item[] {
-  return data.items.filter((item) => !featured || item.featured) as Item[];
+  return data.items.filter((item) => {
+    if (quadrant && item.quadrant !== quadrant) return false;
+    return !(featured && !item.featured);
+  }) as Item[];
 }
 
 export function getItem(id: string): Item | undefined {
@@ -46,3 +49,27 @@ export function getItem(id: string): Item | undefined {
 
 export const sortByFeaturedAndTitle = (a: Item, b: Item) =>
   Number(b.featured) - Number(a.featured) || a.title.localeCompare(b.title);
+
+export const groupItemsByRing = (items: Item[]) => {
+  return getRings().reduce(
+    (acc, ring) => {
+      const ringItems = items.filter((item) => item.ring === ring.id);
+      if (ringItems.length) acc[ring.id] = ringItems;
+      return acc;
+    },
+    {} as { [ringId: string]: Item[] },
+  );
+};
+
+export const groupItemsByQuadrant = (items: Item[]) => {
+  return getQuadrants().reduce(
+    (acc, quadrant) => {
+      const quadrantItems = items.filter(
+        (item) => item.quadrant === quadrant.id,
+      );
+      if (quadrantItems.length) acc[quadrant.id] = quadrantItems;
+      return acc;
+    },
+    {} as { [quadrantId: string]: Item[] },
+  );
+};

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

@@ -0,0 +1,57 @@
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { useMemo } from "react";
+
+import { RingBadge } from "@/components/Badge/Badge";
+import { ItemList } from "@/components/ItemList/ItemList";
+import {
+  getItem,
+  getItems,
+  getQuadrant,
+  sortByFeaturedAndTitle,
+} from "@/lib/data";
+import { formatTitle } from "@/lib/format";
+import { CustomPage } from "@/pages/_app";
+
+const ItemPage: CustomPage = () => {
+  const { query } = useRouter();
+  const quadrant = getQuadrant(query.quadrant as string);
+  const item = getItem(query.id as string);
+
+  const relatedItems = useMemo(() => {
+    return getItems()
+      .filter((i) => i.quadrant === quadrant?.id && i.ring == item?.ring)
+      .sort(sortByFeaturedAndTitle);
+  }, [quadrant?.id, item?.ring]);
+
+  if (!quadrant || !item) return null;
+
+  return (
+    <>
+      <Head>
+        <title>{formatTitle(item.title, quadrant.title)}</title>
+        <meta name="description" content={quadrant.description} />
+      </Head>
+
+      <h1>{item.title}</h1>
+      <RingBadge ring={item.ring} size="large" />
+      <div dangerouslySetInnerHTML={{ __html: item.body }}></div>
+      <ItemList items={relatedItems} activeId={item.id} />
+    </>
+  );
+};
+
+export default ItemPage;
+
+export const getStaticPaths = async () => {
+  const items = getItems();
+  const paths = items.map((item) => ({
+    params: { quadrant: item.quadrant, id: item.id },
+  }));
+
+  return { paths, fallback: false };
+};
+
+export const getStaticProps = async () => {
+  return { props: {} };
+};

src/pages/[quadrant]/index.tsx

@@ -1,15 +1,25 @@
 import Head from "next/head";
 import { useRouter } from "next/router";
+import { useMemo } from "react";
 
-import { getQuadrant, getQuadrants } from "@/lib/data";
+import { RingList } from "@/components/RingList/RingList";
+import {
+  getItems,
+  getQuadrant,
+  getQuadrants,
+  sortByFeaturedAndTitle,
+} from "@/lib/data";
 import { formatTitle } from "@/lib/format";
 import { CustomPage } from "@/pages/_app";
 
 const QuadrantPage: CustomPage = () => {
   const { query } = useRouter();
   const quadrant = getQuadrant(query.quadrant as string);
-
+  const items = useMemo(
-  if (!quadrant) return null;
+    () => quadrant?.id && getItems(quadrant.id).sort(sortByFeaturedAndTitle),
+    [quadrant?.id],
+  );
+  if (!quadrant || !items) return null;
 
   return (
     <>
@@ -18,8 +28,10 @@ const QuadrantPage: CustomPage = () => {
         <meta name="description" content={quadrant.description} />
       </Head>
 
-      <h1>Quadrant: {query.quadrant}</h1>
+      <h1>{quadrant.title}</h1>
-      <pre>{JSON.stringify(quadrant)}</pre>
+      <h2>{quadrant.description}</h2>
+
+      <RingList items={items} />
     </>
   );
 };

src/pages/index.tsx

@@ -1,17 +1,19 @@
 import { ItemList } from "@/components/ItemList/ItemList";
+import { QuadrantList } from "@/components/QuadrantList/QuadrantList";
 import { getAppName, getItems, getReleases } from "@/lib/data";
 import { CustomPage } from "@/pages/_app";
 
 const Home: CustomPage = () => {
   const appName = getAppName();
   const version = getReleases().length;
+  const items = getItems(undefined, true);
   return (
     <>
       <h1>
         {appName}{" "}
         <span style={{ color: "var(--highlight)" }}>Version #{version}</span>
       </h1>
-      <ItemList items={getItems()} />
+      <QuadrantList items={items} />
     </>
   );
 };

src/styles/globals.css

@@ -75,7 +75,7 @@ h2 {
 }
 
 h3 {
-  font-size: 18px;
+  font-size: 20px;
 }
 
 ul,