feat: start of tier list

packages/website/src/constants/tools.ts

@@ -162,12 +162,27 @@ export const galleryTool: Tool = {
   branches: ['main', 'dev'],
 };
 
+export const tierListTool: Tool = {
+  id: 'tier-list',
+  title: 'Tier list',
+  description: 'Rank Blitz tanks',
+  pageDescription:
+    'Explore tier lists ranking tanks from best to worst, based on player ratings and statistical performance in World of Tanks Blitz',
+  button: {
+    text: 'Rank tanks',
+    color: 'orange',
+  },
+  image: 'oKKc8Xv',
+  branches: ['main', 'dev'],
+};
+
 export const TOOLS: Tool[] = [
   tankopediaTool,
   compareTool,
   performanceTool,
   galleryTool,
   sessionTool,
+  tierListTool,
   embedTool,
   // ratingTool,
 ];

packages/website/src/core/radix/var.ts

@@ -4,7 +4,7 @@ type ExcludeSuffix<T> =
   T extends `${string}${'A' | `${'P3' | 'Dark'}${'' | 'A'}`}` ? never : T;
 type RadixColor = ExcludeSuffix<keyof typeof ColorsRaw>;
 
-type Name =
+export type VarName =
   | `color-${'background' | `panel-${'solid' | 'translucent'}` | 'surface' | 'overlay'}`
   | `radius-${1 | 2 | 3 | 4 | 5 | 6 | 'full'}`
   | `space-${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`
@@ -27,6 +27,6 @@ type Name =
       | 'track'
       | 'contrast'}`;
 
-export function Var(name: Name) {
+export function Var(name: VarName) {
   return `var(--${name})`;
 }

packages/website/src/pages/index.astro

@@ -1,5 +1,5 @@
 ---
-import { Box, Flex, Heading } from '@radix-ui/themes';
+import { Flex, Heading } from '@radix-ui/themes';
 import HomeHero from '../components/HomeHero.astro';
 import { HomePageHotTanks } from '../components/HomePageHotTanks';
 import { Plugs } from '../components/Plugs.tsx';
@@ -13,6 +13,7 @@ import {
   performanceTool,
   sessionTool,
   tankopediaTool,
+  tierListTool,
 } from '../constants/tools';
 import BaseLayout from '../layouts/BaseLayout.astro';
 ---
@@ -37,17 +38,16 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <ToolCard tool={galleryTool} />
         <ToolCard tool={sessionTool} />
-        {/* <ToolCard tool={ratingTool} /> */}
       </Flex>
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+        <ToolCard tool={tierListTool} />
         <ToolCard tool={embedTool} />
-        <ToolCard tool={discordTool} />
       </Flex>
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <ToolCard tool={moreTool} />
-        <Box flexGrow="1" />
+        <ToolCard tool={discordTool} />
       </Flex>
 
       <Heading align="center" mt="6">Other cool projects</Heading>

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

@@ -0,0 +1,41 @@
+import { Heading, Table } from '@radix-ui/themes';
+import { PageWrapper } from '../../../components/PageWrapper';
+import { Var, type VarName } from '../../../core/radix/var';
+
+export function Page() {
+  return <Content />;
+}
+
+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>
+    </PageWrapper>
+  );
+}

packages/website/src/pages/tools/tier-list/index.astro

@@ -0,0 +1,9 @@
+---
+import { tierListTool } from '../../../constants/tools';
+import ToolLayout from '../../../layouts/ToolLayout.astro';
+import { Page } from './_index';
+---
+
+<ToolLayout tool={tierListTool}>
+  <Page client:load />
+</ToolLayout>