feat: migration 3

packages/bot/src/components/Breakdown/components/Root.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+
+interface RootProps {
+  children: ReactNode;
+}
+
+export function Root({ children }: RootProps) {
+  return (
+    <div
+      className="session-tracker-root"
+      style={{ display: 'flex', flexDirection: 'column', gap: 8 }}
+    >
+      {children}
+    </div>
+  );
+}

packages/bot/src/components/Breakdown/components/Row.tsx

@@ -0,0 +1,119 @@
+import { Percentile } from '@blitzkit/core/src/statistics/percentiles';
+import { createColors } from 'bepaint';
+import {
+  AccentColor,
+  GrayColor,
+  PALETTES,
+} from '../../../constants/radixColors';
+import { TankClass, TreeType } from '../../Tanks';
+import { TREE_TYPE_ICONS } from '../../Tanks/components/Item/constants';
+import { RowStat } from './RowStat';
+
+export interface RowStatItem {
+  title: string;
+  current?: number | string;
+  career?: number | string;
+  delta?: number;
+  percentile?: Percentile;
+}
+
+interface RowProps {
+  type?: 'tank' | 'summary';
+  naked?: boolean;
+  title: string;
+  minimized?: boolean;
+  treeType?: TreeType;
+  tankType?: TankClass;
+  color?: AccentColor | GrayColor;
+  stats: (RowStatItem | undefined)[];
+}
+
+export function Row({
+  color = 'slate',
+  stats,
+  title,
+  minimized,
+  tankType,
+  treeType,
+  naked = false,
+  type,
+}: RowProps) {
+  const palette = PALETTES[`${color}Dark`];
+  const theme = createColors(palette);
+
+  return (
+    <div
+      className="session-tracker-row"
+      style={{
+        maxWidth: naked ? 600 : Infinity,
+        display: 'flex',
+        flexDirection: 'column',
+        borderRadius: 4,
+        backgroundColor: naked
+          ? `${theme.appBackground2}c0`
+          : theme.appBackground2,
+        overflow: 'hidden',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 8,
+          gap: 4,
+          backgroundColor: naked
+            ? `${theme.componentInteractive}c0`
+            : theme.componentInteractive,
+        }}
+      >
+        {type === 'tank' && tankType !== undefined && (
+          <img
+            alt={tankType}
+            src={TREE_TYPE_ICONS[treeType ?? 'researchable'][tankType]}
+            style={{ width: 16, height: 16 }}
+          />
+        )}
+
+        <span
+          style={{
+            color:
+              type === 'tank'
+                ? treeType === 'collector'
+                  ? theme.textLowContrast_blue
+                  : treeType === 'premium'
+                  ? theme.textLowContrast_amber
+                  : theme.textHighContrast
+                : theme.textLowContrast,
+            fontWeight: 900,
+            fontSize: 16,
+          }}
+        >
+          {title}
+        </span>
+      </div>
+
+      <div
+        style={{
+          display: 'flex',
+          paddingTop: 8,
+          paddingBottom: 8,
+        }}
+      >
+        {stats.map(
+          (row, index) =>
+            row && (
+              <RowStat
+                minimized={minimized}
+                key={index}
+                name={`${row.title} • ${row.career ?? '--'}`}
+                value={row.current ?? '--'}
+                delta={row.delta}
+                percentile={row.percentile}
+              />
+            ),
+        )}
+      </div>
+    </div>
+  );
+}

packages/bot/src/components/Breakdown/components/RowStat.tsx

@@ -0,0 +1,89 @@
+import { Percentile } from '@blitzkit/core/src/statistics/percentiles';
+import { createColors } from 'bepaint';
+import {
+  AccentColor,
+  GrayColor,
+  PALETTES,
+} from '../../../constants/radixColors';
+import PercentileIndicator from '../../PercentileIndicator';
+
+interface RowStatProps {
+  name: string;
+  value?: string | number;
+  delta?: number;
+  percentile?: Percentile;
+  minimized?: boolean;
+  color?: AccentColor | GrayColor;
+}
+
+export function RowStat({
+  name,
+  value,
+  delta,
+  percentile,
+  minimized = false,
+  color = 'slate',
+}: RowStatProps) {
+  const theme = createColors(PALETTES[`${color}Dark`]);
+
+  return (
+    <div
+      className="session-tracker-row-stat"
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 4,
+        alignItems: 'center',
+        justifyContent: 'center',
+        flex: 1,
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          gap: 4,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {percentile === undefined && delta !== undefined && delta !== 0 && (
+          <img
+            alt={delta > 0 ? 'Increase' : 'Decrease'}
+            src={
+              (delta ?? 0) > 0
+                ? 'https://i.imgur.com/qbjiXa1.png'
+                : 'https://i.imgur.com/3uyNhun.png'
+            }
+            style={{ width: 12, height: 12 }}
+          />
+        )}
+        {percentile !== undefined && (
+          <PercentileIndicator percentile={percentile} />
+        )}
+
+        <span
+          style={{
+            color: theme.textHighContrast,
+            fontWeight: 700,
+            fontSize: 16,
+            textAlign: 'center',
+          }}
+        >
+          {value}
+        </span>
+      </div>
+
+      {!minimized && (
+        <span
+          style={{
+            color: theme.textLowContrast,
+            textAlign: 'center',
+            fontSize: 12,
+          }}
+        >
+          {name}
+        </span>
+      )}
+    </div>
+  );
+}

packages/bot/src/components/Breakdown/index.ts

@@ -0,0 +1,3 @@
+export * from './components/Root';
+export * from './components/Row';
+export * from './components/RowStat';