From f066328c8a3a6d1cdd2090ec0318bd2b5a0a827f Mon Sep 17 00:00:00 2001
From: dushixiang <dushixiang@typesafe.cn>
Date: Sat, 20 Dec 2025 17:57:20 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8E=86=E5=8F=B2=E6=95=B0=E6=8D=AE=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E3=80=8C=E5=B3=B0=E5=80=BC=E3=80=8D=E3=80=8C=E5=9D=87?=
 =?UTF-8?q?=E5=80=BC=E3=80=8D=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/AggregationSelector.tsx | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 web/src/components/common/AggregationSelector.tsx

diff --git a/web/src/components/common/AggregationSelector.tsx b/web/src/components/common/AggregationSelector.tsx
new file mode 100644
index 0000000..3f1dae8
--- /dev/null
+++ b/web/src/components/common/AggregationSelector.tsx
@@ -0,0 +1,51 @@
+import type {AggregationOptionValue} from '@/constants/metrics';
+import {cn} from '@/lib/utils';
+
+export interface AggregationOption {
+    label: string;
+    value: AggregationOptionValue;
+}
+
+interface AggregationSelectorProps {
+    value: AggregationOptionValue;
+    onChange: (value: AggregationOptionValue) => void;
+    options: readonly AggregationOption[];
+    variant?: 'light' | 'dark';
+}
+
+export const AggregationSelector = ({
+                                        value,
+                                        onChange,
+                                        options,
+                                        variant = 'light',
+                                    }: AggregationSelectorProps) => {
+    const isDark = variant === 'dark';
+
+    return (
+        <div className="flex flex-wrap items-center gap-2">
+            {options.map((option) => {
+                const isActive = option.value === value;
+                return (
+                    <button
+                        key={option.value}
+                        type="button"
+                        onClick={() => onChange(option.value)}
+                        className={cn(
+                            "rounded-lg border px-3 py-1.5 text-xs font-medium transition-all whitespace-nowrap",
+                            isDark && "font-bold font-mono tracking-wider uppercase",
+                            isActive
+                                ? isDark
+                                    ? 'border-cyan-500/50 bg-cyan-500/20 text-cyan-300 shadow-[0_0_10px_rgba(34,211,238,0.3)]'
+                                    : 'border-blue-500 dark:border-blue-500 bg-blue-500 text-white shadow-sm'
+                                : isDark
+                                    ? 'border-cyan-900/30 bg-black/30 text-cyan-500 hover:text-cyan-500 hover:border-cyan-700'
+                                    : 'border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:border-blue-300 dark:hover:border-blue-600 hover:text-blue-600 dark:hover:text-blue-400'
+                        )}
+                    >
+                        {option.label}
+                    </button>
+                );
+            })}
+        </div>
+    );
+};