From c1b156bdb4898431ba60c419f01bb6cb1fa890a6 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 28 Mar 2026 13:52:54 +0100
Subject: [PATCH] feat(ui): add ContentTabs component (Exchanges | Dashboard |
 Runtime)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ui/src/components/ContentTabs.module.css |  5 +++++
 ui/src/components/ContentTabs.tsx        | 26 ++++++++++++++++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 ui/src/components/ContentTabs.module.css
 create mode 100644 ui/src/components/ContentTabs.tsx

diff --git a/ui/src/components/ContentTabs.module.css b/ui/src/components/ContentTabs.module.css
new file mode 100644
index 00000000..cd3c72d1
--- /dev/null
+++ b/ui/src/components/ContentTabs.module.css
@@ -0,0 +1,5 @@
+.wrapper {
+  padding: 0 1.5rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0;
+}
diff --git a/ui/src/components/ContentTabs.tsx b/ui/src/components/ContentTabs.tsx
new file mode 100644
index 00000000..e28b5bde
--- /dev/null
+++ b/ui/src/components/ContentTabs.tsx
@@ -0,0 +1,26 @@
+import { SegmentedTabs } from '@cameleer/design-system';
+import type { TabKey } from '../hooks/useScope';
+import styles from './ContentTabs.module.css';
+
+const TABS = [
+  { label: 'Exchanges', value: 'exchanges' as const },
+  { label: 'Dashboard', value: 'dashboard' as const },
+  { label: 'Runtime', value: 'runtime' as const },
+];
+
+interface ContentTabsProps {
+  active: TabKey;
+  onChange: (tab: TabKey) => void;
+}
+
+export function ContentTabs({ active, onChange }: ContentTabsProps) {
+  return (
+    <div className={styles.wrapper}>
+      <SegmentedTabs
+        tabs={TABS}
+        active={active}
+        onChange={(v) => onChange(v as TabKey)}
+      />
+    </div>
+  );
+}