diff --git a/src/components/ItemList/ItemList.module.css b/src/components/ItemList/ItemList.module.css index 5ac0b4c..d986332 100644 --- a/src/components/ItemList/ItemList.module.css +++ b/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; + } + } +} diff --git a/src/components/ItemList/ItemList.tsx b/src/components/ItemList/ItemList.tsx index 7740070..5c94643 100644 --- a/src/components/ItemList/ItemList.tsx +++ b/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({