feat: data-driven tools

packages/website/src/constants/tools.json

@@ -0,0 +1,24 @@
+[
+  {
+    "id": "tanks",
+    "strings": "tankopedia",
+    "button": { "color": "purple" },
+    "significant": true
+  },
+
+  {
+    "id": "compare",
+    "button": { "color": "crimson" }
+  },
+
+  {
+    "id": "session",
+    "button": { "color": "blue" }
+  },
+
+  {
+    "id": "discord",
+    "href": "https://discord.com/application-directory/1097673957865443370",
+    "button": { "color": "indigo" }
+  }
+]

packages/website/src/constants/tools.ts

@@ -1,148 +1,82 @@
-import { Button } from '@radix-ui/themes';
-import type { ComponentProps } from 'react';
+import { Button } from "@radix-ui/themes";
+import type { ComponentProps } from "react";
 
 export interface Tool {
   id: string;
-  stringsId?: string;
+  strings?: string;
   disabled?: boolean;
   href?: string;
   button: {
     highContrast?: boolean;
-    color: ComponentProps<typeof Button>['color'];
+    color: ComponentProps<typeof Button>["color"];
   };
   significant?: boolean;
-  branches?: string[];
 }
 
-export const tankopediaTool: Tool = {
-  id: 'tanks',
-  stringsId: 'tankopedia',
-  button: {
-    color: 'purple',
-  },
-  significant: true,
-  branches: ['main', 'dev', 'opentest', 'preview'],
-};
-
-// export const ratingTool: Tool = {
-//   id: 'rating',
-//   image: 'WEyMZH3',
-//   button: {
-//     color: 'orange',
-//   },
-//   branches: ['main', 'dev'],
-// };
-
-export const compareTool: Tool = {
-  id: 'compare',
-  button: {
-    color: 'crimson',
-  },
-  branches: ['main', 'dev', 'opentest', 'preview'],
-};
-
-export const sessionTool: Tool = {
-  // TODO: rename to tracker
-  id: 'session',
-  button: {
-    color: 'blue',
-  },
-  branches: ['main', 'dev'],
-};
-
-export const discordTool: Tool = {
-  id: 'discord',
-  href: 'https://discord.com/application-directory/1097673957865443370',
-  button: {
-    color: 'indigo',
-  },
-};
-
-export const moreTool: Tool = {
-  id: 'more',
-  href: 'https://discord.gg/nDt7AjGJQH',
-  button: {
-    color: 'plum',
-  },
-};
-
-export const playersTool: Tool = {
-  id: 'players',
-  button: {
-    color: 'blue',
-  },
-  href: '_', // TODO: remove this to re-enable link
-  branches: ['main', 'dev'],
-};
-
-export const performanceTool: Tool = {
-  id: 'performance',
-  button: {
-    color: 'jade',
-  },
-  branches: ['main', 'dev'],
-};
-
-export const embedTool: Tool = {
-  id: 'embed',
-  button: {
-    color: 'red',
-  },
-  branches: ['main', 'dev'],
-};
-
-export const homeTool: Tool = {
-  id: 'home',
-  button: { color: 'blue' },
-};
-
-export const galleryTool: Tool = {
-  id: 'gallery',
-  button: {
-    color: 'gold',
-  },
-  branches: ['main', 'dev'],
-};
-
-export const tierListTool: Tool = {
-  id: 'tier-list',
-  stringsId: 'tier_list',
-  button: {
-    color: 'orange',
-  },
-  branches: ['main', 'dev', 'opentest', 'preview'],
-};
-
-export const chartsTool: Tool = {
-  id: 'charts',
-  button: {
-    color: 'bronze',
-  },
-  branches: ['main', 'dev'],
-};
-
-export const guessTool: Tool = {
-  id: 'guess',
-  button: { color: 'cyan' },
-  branches: ['main', 'dev', 'opentest', 'preview'],
-};
-
-export const mixerTool: Tool = {
-  id: 'mixer',
-  button: { color: 'red' },
-  branches: ['main', 'dev', 'opentest', 'preview'],
-};
-
 export const TOOLS: Tool[] = [
-  tankopediaTool,
-  compareTool,
-  performanceTool,
-  guessTool,
-  // mixerTool,
-  // chartsTool,
-  galleryTool,
-  sessionTool,
-  tierListTool,
-  embedTool,
-  // ratingTool,
+  {
+    id: "tanks",
+    strings: "tankopedia",
+    button: { color: "purple" },
+    significant: true,
+  },
+  {
+    id: "players",
+    disabled: true,
+    button: { color: "blue" },
+  },
+  {
+    id: "compare",
+    button: { color: "crimson" },
+  },
+  {
+    id: "performance",
+    button: { color: "jade" },
+  },
+  {
+    id: "charts",
+    disabled: true,
+    button: { color: "bronze" },
+  },
+  {
+    id: "guess",
+    button: { color: "cyan" },
+  },
+  {
+    id: "mixer",
+    disabled: true,
+    button: { color: "red" },
+  },
+  {
+    id: "charts",
+    disabled: true,
+    button: { color: "red" },
+  },
+  {
+    id: "gallery",
+    button: { color: "gold" },
+  },
+  {
+    id: "session",
+    button: { color: "blue" },
+  },
+  {
+    id: "discord",
+    href: "https://discord.com/application-directory/1097673957865443370",
+    button: { color: "indigo" },
+  },
+  {
+    id: "tier-list",
+    strings: "tier_list",
+    button: { color: "orange" },
+  },
+  {
+    id: "embed",
+    button: { color: "red" },
+  },
+  {
+    id: "more",
+    href: "https://discord.gg/nDt7AjGJQH",
+    button: { color: "plum" },
+  },
 ];