feat: add ItemList

src/components/ItemList/ItemList.module.css

@@ -0,0 +1,31 @@
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.item {
+  + .item {
+    border-top: 1px solid var(--border);
+  }
+}
+
+.flag {
+  margin-left: 8px;
+}
+
+.link {
+  display: block;
+  padding: 10px;
+
+  &.isFadedOut {
+    opacity: 0.65;
+  }
+
+  &:hover,
+  &.isActive {
+    background: var(--foreground);
+    color: var(--background);
+    opacity: 1;
+  }
+}

src/components/ItemList/ItemList.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+
+import styles from "./ItemList.module.css";
+
+import { FlagBadge } from "@/components/Badge/Badge";
+import { Item } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+interface ItemListProps {
+  items: Item[];
+  activeId?: string;
+}
+
+export function ItemList({ items, activeId }: ItemListProps) {
+  return (
+    <ul className={styles.list}>
+      {items.map((item) => (
+        <li className={styles.item} key={item.id}>
+          <Link
+            className={cn(styles.link, {
+              [styles.isFadedOut]: !item.featured,
+              [styles.isActive]: item.id === activeId,
+            })}
+            href={`/${item.quadrant}/${item.id}`}
+          >
+            {item.title}
+            <FlagBadge className={styles.flag} flag={item.flag} />
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
+}

src/components/Layout/Layout.module.css

@@ -17,6 +17,7 @@
 .layout.default {
   .content {
     max-width: var(--max-width);
+    min-height: calc(100vh - 250px);
     margin: 0 auto;
     padding: 20px;
   }