grid layout

bun.lock

@@ -5,6 +5,7 @@
     "": {
       "name": "blitzkit",
       "dependencies": {
+        "prettier": "^3.8.3",
         "typescript": "^5.9.3",
       },
     },

package.json

@@ -14,6 +14,7 @@
     "packages/*"
   ],
   "dependencies": {
+    "prettier": "^3.8.3",
     "typescript": "^5.9.3"
   }
 }

packages/website-ue/src/components/BaseStyles.astro

@@ -19,6 +19,7 @@ import "@fontsource-variable/roboto-flex";
     --page-width: 64rem;
 
     --max-size: max(100vw, 100vh);
+    --radius-max: var(--max-size);
 
     --font-size-regular: 1rem;
     --font-size-minor: 0.75rem;
@@ -106,7 +107,7 @@ import "@fontsource-variable/roboto-flex";
     }
 
     &[data-radius="max"] {
-      border-radius: var(--max-size);
+      border-radius: var(--radius-max);
     }
   }
 </style>

packages/website-ue/src/components/TankopediaCharacteristics/index.module.css

@@ -41,30 +41,59 @@
     }
 
     .content {
-        --cell-width: 5rem;
+      --cell-width: 3rem;
-        --toy-span: 3;
+      --toy-span: 5;
 
-        display: grid;
+      display: grid;
-        grid-auto-rows: var(--cell-width);
+      grid-auto-rows: var(--cell-width);
-        grid-template-columns: repeat(auto-fill, minmax(var(--cell-width), 1fr));
+      grid-template-columns: repeat(auto-fill, minmax(var(--cell-width), 1fr));
-        grid-auto-flow: row dense;
+      grid-auto-flow: row dense;
-        gap: var(--space-4);
+      gap: var(--space-4);
 
-        .item {
+      .item {
-            background-color: red;
+        grid-row: span 1;
-            grid-row: span 1;
+        grid-column: span var(--toy-span);
-            grid-column: span var(--toy-span);
+
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-2);
+
+        .value {
+          display: flex;
+          justify-content: space-between;
         }
 
-        .toy {
+        .ranking {
-            grid-row: span var(--toy-span);
+          display: flex;
-            grid-column: span var(--toy-span);
+          align-items: center;
+          gap: var(--space-3);
+
+          .bar-wrapper {
+            flex: 1;
+            height: var(--space-2);
 
             background-color: var(--gray-3);
-            border: var(--gray-5) solid var(--space-1);
+            border-radius: var(--radius-max);
+            overflow: hidden;
 
-            border-radius: var(--space-3);
+            .bar {
+              background-color: green;
+              width: 75%;
+              height: 100%;
+            }
+          }
         }
+      }
+
+      .toy {
+        grid-row: span var(--toy-span);
+        grid-column: span var(--toy-span);
+
+        background-color: var(--gray-3);
+        border: var(--gray-5) solid var(--space-1);
+
+        border-radius: var(--space-3);
+      }
     }
   }
 }

packages/website-ue/src/components/TankopediaCharacteristics/index.tsx

@@ -7,6 +7,7 @@ import {
   type CharacteristicsGroup,
 } from "../../tankopedia/characteristicsOrder";
 import { Heading } from "../Heading";
+import { Text } from "../Text";
 import styles from "./index.module.css";
 
 export function TankopediaCharacteristics() {
@@ -29,7 +30,11 @@ function Group({ group, order }: CharacteristicsGroup) {
         <Heading className={styles.title} size="3">
           <div className={styles["title-content"]}>
             {isOpen ? <CaretDownIcon /> : <CaretRightIcon />}
-            {strings.tanks.characteristics.titles[group]}
+            {
+              (strings.tanks.characteristics.titles as Record<string, string>)[
+                group
+              ]
+            }
           </div>
         </Heading>
 
@@ -49,10 +54,27 @@ interface ToyProps {
   toy: string;
 }
 
+function Item({ name }: CharacteristicRenderConfig) {
+  return (
+    <span className={styles.item}>
+      <div className={styles.value}>
+        <Text lowContrast>{name}</Text>
+        <Text>123</Text>
+      </div>
+
+      <div className={styles.ranking}>
+        <div className={styles["bar-wrapper"]}>
+          <div className={styles.bar} />
+        </div>
+
+        <Text lowContrast size="minor" className={styles.number}>
+          1 / 132
+        </Text>
+      </div>
+    </span>
+  );
+}
+
 function Toy({ toy }: ToyProps) {
   return <span className={styles.toy}></span>;
 }
-
-function Item({ name }: CharacteristicRenderConfig) {
-  return <span className={styles.item}></span>;
-}