feat: start on ui

packages/website/src/components/HomePageHotTanks.tsx

@@ -1,7 +1,7 @@
 import { fetchAverageDefinitions, fetchTankDefinitions } from '@blitzkit/core';
 import { Box, Flex, Heading } from '@radix-ui/themes';
 import { TankopediaPersistent } from '../stores/tankopediaPersistent';
-import { TankCard } from './TankSearch/components/TankCard';
+import { TankCard } from './TankCard';
 
 const tankDefinitions = await fetchTankDefinitions();
 const averageDefinitions = await fetchAverageDefinitions();

packages/website/src/components/TankCard/index.tsx

@@ -12,11 +12,11 @@ import { useStore } from '@nanostores/react';
 import { Flex, Link, Text } from '@radix-ui/themes';
 import { uniq } from 'lodash-es';
 import { useMemo } from 'react';
-import { resolveReload } from '../../../../core/blitzkit/resolveReload';
-import { TankopediaPersistent } from '../../../../stores/tankopediaPersistent';
-import { $tankopediaSort } from '../../../../stores/tankopediaSort';
-import { classIcons } from '../../../ClassIcon';
-import { MAX_RECENTLY_VIEWED } from '../../constants';
+import { resolveReload } from '../../core/blitzkit/resolveReload';
+import { TankopediaPersistent } from '../../stores/tankopediaPersistent';
+import { $tankopediaSort } from '../../stores/tankopediaSort';
+import { classIcons } from '../ClassIcon';
+import { MAX_RECENTLY_VIEWED } from '../TankSearch/constants';
 import './index.css';
 
 interface TankCardProps {

packages/website/src/components/TankSearch/components/RecentlyViewed.tsx

@@ -6,7 +6,7 @@ import { useMemo } from 'react';
 import { $tankFilters, initialTankFilters } from '../../../stores/tankFilters';
 import { TankopediaPersistent } from '../../../stores/tankopediaPersistent';
 import { $tankopediaSort } from '../../../stores/tankopediaSort';
-import { TankCard } from './TankCard';
+import { TankCard } from '../../TankCard';
 import { TankCardWrapper } from './TankCardWrapper';
 
 const tankDefinitions = await fetchTankDefinitions();

packages/website/src/components/TankSearch/index.tsx

@@ -24,12 +24,12 @@ import {
 } from '../../stores/tankopediaPersistent/constants';
 import { $tankopediaSort } from '../../stores/tankopediaSort';
 import { ExperimentIcon } from '../ExperimentIcon';
+import { TankCard } from '../TankCard';
 import { FilterControl } from './components/FilterControl';
 import { NoResults } from './components/NoResults';
 import { RecentlyViewed } from './components/RecentlyViewed';
 import { SearchBar } from './components/SearchBar';
 import { SkeletonTankCard } from './components/SkeletonTankCard';
-import { TankCard } from './components/TankCard';
 import { TankCardWrapper } from './components/TankCardWrapper';
 import { MAX_RECENTLY_VIEWED, treeTypeOrder } from './constants';
 

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>
+  );
+}

packages/website/src/pages/tools/tier-list/_index.tsx

@@ -1,41 +1,21 @@
-import { Heading, Table } from '@radix-ui/themes';
 import { PageWrapper } from '../../../components/PageWrapper';
-import { Var, type VarName } from '../../../core/radix/var';
+import { TierListTable } from '../../../components/TierList/Table';
+import { TierListTiles } from '../../../components/TierList/Tiles';
+import { TankopediaPersistent } from '../../../stores/tankopediaPersistent';
 
 export function Page() {
-  return <Content />;
+  return (
+    <TankopediaPersistent.Provider>
+      <Content />
+    </TankopediaPersistent.Provider>
+  );
 }
 
-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' },
-];
-
 function Content() {
   return (
     <PageWrapper color="orange">
-      <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>
+      <TierListTable />
+      <TierListTiles />
     </PageWrapper>
   );
 }