chore: starter template

packages/components/src/BarChart.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { Box, Group, Stack, Text } from '@mantine/core'
+
+export interface BarChartDatum {
+  label: React.ReactNode
+  value: number
+  /** Mantine color key for the bar (e.g. 'teal', 'red'). Defaults to the theme primary. */
+  color?: string
+}
+
+export interface BarChartProps {
+  data: BarChartDatum[]
+  /** Format the numeric value shown at the end of each bar. */
+  valueFormatter?: (value: number) => string
+}
+
+// A dependency-free horizontal bar chart (CSS only, theme colours). Feed it
+// aggregated counts from a stats RPC — no charting library to install or break.
+export function BarChart({ data, valueFormatter }: BarChartProps) {
+  const max = Math.max(1, ...data.map((d) => d.value))
+  const fmt = valueFormatter ?? ((n: number) => String(n))
+
+  return (
+    <Stack gap="sm">
+      {data.map((datum, index) => (
+        <Stack key={index} gap={4}>
+          <Group justify="space-between" gap="xs">
+            <Text size="sm">{datum.label}</Text>
+            <Text size="sm" fw={600}>
+              {fmt(datum.value)}
+            </Text>
+          </Group>
+          <Box
+            style={{
+              height: 8,
+              borderRadius: 'var(--mantine-radius-xl)',
+              background: 'var(--mantine-color-default-hover)',
+              overflow: 'hidden',
+            }}
+          >
+            <Box
+              style={{
+                height: '100%',
+                width: `${(datum.value / max) * 100}%`,
+                borderRadius: 'var(--mantine-radius-xl)',
+                background: datum.color
+                  ? `var(--mantine-color-${datum.color}-6)`
+                  : 'var(--mantine-primary-color-6)',
+                transition: 'width 200ms ease',
+              }}
+            />
+          </Box>
+        </Stack>
+      ))}
+    </Stack>
+  )
+}