feat: start on ui

packages/website/src/components/TierList/Table.tsx

@@ -0,0 +1,34 @@
+import { Heading, Table } from '@radix-ui/themes';
+import { Var, type VarName } from '../../core/radix/var';
+
+const rows: {
+  name: string;
+  color: VarName;
+}[] = [
+  { name: 'S', color: 'tomato-9' },
+  { name: 'A', color: 'orange-9' },
+  { name: 'B', color: 'amber-9' },
+  { name: 'C', color: 'green-9' },
+  { name: 'D', color: 'blue-9' },
+];
+
+export function TierListTable() {
+  return (
+    <Table.Root variant="surface">
+      <Table.Body>
+        {rows.map((row) => (
+          <Table.Row key={row.name}>
+            <Table.RowHeaderCell
+              width="0"
+              style={{ backgroundColor: Var(row.color) }}
+            >
+              <Heading>{row.name}</Heading>
+            </Table.RowHeaderCell>
+
+            <Table.Cell></Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table.Root>
+  );
+}

packages/website/src/components/TierList/Tiles.tsx

@@ -0,0 +1,16 @@
+import { fetchTankDefinitions } from '@blitzkit/core';
+import { TankCard } from '../TankCard';
+import { TankCardWrapper } from '../TankSearch/components/TankCardWrapper';
+
+const tankDefinitions = await fetchTankDefinitions();
+const tanks = Object.values(tankDefinitions.tanks);
+
+export function TierListTiles() {
+  return (
+    <TankCardWrapper>
+      {tanks.map((tank) => (
+        <TankCard tank={tank} />
+      ))}
+    </TankCardWrapper>
+  );
+}