feat: start of tier list

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>