feat: migration 3

packages/bot/src/components/GenericStats/components/GenericStatsColumn.tsx

@@ -0,0 +1,16 @@
+import { GenericStat } from '..';
+import GenericStatsRow from './GenericStatsRow';
+
+interface GenericStatsColumnProps {
+  stats: GenericStat[];
+}
+
+export default function GenericStatsColumn({ stats }: GenericStatsColumnProps) {
+  return (
+    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
+      {stats.map((stat) => (
+        <GenericStatsRow key={stat[0]} stat={stat} />
+      ))}
+    </div>
+  );
+}

packages/bot/src/components/GenericStats/components/GenericStatsRow.tsx

@@ -0,0 +1,46 @@
+import { GenericStat } from '..';
+import { theme } from '../../../stitches.config';
+import PercentileIndicator from '../../PercentileIndicator';
+
+interface GenericStatsRowProps {
+  stat: GenericStat;
+}
+
+export default function GenericStatsRow({ stat }: GenericStatsRowProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+      }}
+    >
+      <span
+        style={{
+          color: theme.colors.textLowContrast,
+          fontSize: 16,
+          whiteSpace: 'nowrap',
+          maxWidth: 128,
+          overflow: 'hidden',
+        }}
+      >
+        {stat[0]}
+      </span>
+
+      <span
+        style={{
+          color: theme.colors.textHighContrast,
+          fontWeight: 700,
+          fontSize: 16,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 4,
+        }}
+      >
+        {stat[2] !== undefined && <PercentileIndicator percentile={stat[2]} />}
+        {stat[1]}
+      </span>
+    </div>
+  );
+}

packages/bot/src/components/GenericStats/index.tsx

@@ -0,0 +1,37 @@
+import { Percentile } from '@blitzkit/core/src/statistics/percentiles';
+import GenericStatsColumn from './components/GenericStatsColumn';
+
+export type GenericStat =
+  | [string, string | number | undefined]
+  | [string, string | number | undefined, Percentile | undefined];
+
+export interface GenericStatsProps {
+  stats: GenericStat[];
+  columnCount?: number;
+}
+
+export default function GenericStats({
+  stats,
+  columnCount = 2,
+}: GenericStatsProps) {
+  const filteredStats = stats.filter(([, value]) => value !== undefined);
+  const itemsPerRow = Math.ceil(filteredStats.length / columnCount);
+  const columns: GenericStat[][] = [];
+
+  filteredStats.forEach((stat, index) => {
+    const column = Math.floor(index / itemsPerRow);
+    if (!columns[column]) columns[column] = [];
+    columns[column].push(stat);
+  });
+
+  return (
+    <div style={{ display: 'flex', gap: 32 }}>
+      {columns.map((stats) => (
+        <GenericStatsColumn
+          key={stats.map((stat) => stat[0]).join('-')}
+          stats={stats}
+        />
+      ))}
+    </div>
+  );
+}