feat: add size large to ItemList

src/components/ItemList/ItemList.module.css

@@ -11,9 +11,25 @@
 }
 
 .flag {
+  flex: 0 0 auto;
+  align-self: baseline;
   margin-left: 8px;
 }
 
+.ring {
+  flex: 0 0 auto;
+  align-self: baseline;
+}
+
+.quadrant {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.info {
+  flex-basis: 100%;
+}
+
 .link {
   display: block;
   padding: 10px;
@@ -37,3 +53,22 @@
     padding: 8px;
   }
 }
+
+.isLarge {
+  .link {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 16px;
+  }
+
+  .quadrant {
+    margin: 0 16px 0 auto;
+  }
+
+  @media (min-width: 768px) {
+    .info {
+      flex-basis: auto;
+      margin-left: auto;
+    }
+  }
+}

src/components/ItemList/ItemList.tsx

@@ -2,7 +2,8 @@ import Link from "next/link";
 
 import styles from "./ItemList.module.css";
 
-import { FlagBadge } from "@/components/Badge/Badge";
+import { FlagBadge, RingBadge } from "@/components/Badge/Badge";
+import { getQuadrant } from "@/lib/data";
 import { Item } from "@/lib/types";
 import { cn } from "@/lib/utils";
 
@@ -23,7 +24,7 @@ export function ItemList({
     <ul
       className={cn(styles.list, className, {
         [styles.isSmall]: size === "small",
-        [styles.large]: size === "large",
+        [styles.isLarge]: size === "large",
       })}
     >
       {items.map((item) => (
@@ -41,6 +42,19 @@ export function ItemList({
               flag={item.flag}
               short={size == "small"}
             />
+
+            {size === "large" && (
+              <div className={styles.info}>
+                <span className={styles.quadrant}>
+                  {getQuadrant(item.quadrant)?.title}
+                </span>
+                <RingBadge
+                  className={styles.ring}
+                  ring={item.ring}
+                  size="small"
+                />
+              </div>
+            )}
           </Link>
         </li>
       ))}

src/pages/overview.tsx

@@ -51,7 +51,7 @@ const Overview: CustomPage = () => {
         onQueryChange={onQueryChange}
       />
 
-      <ItemList items={items} />
+      <ItemList items={items} size="large" />
     </>
   );
 };