From 45d50b2167189a5eeab48c96f7f1000d54c8da5a Mon Sep 17 00:00:00 2001
From: arsam <me@asabbagh.com>
Date: Fri, 18 Sep 2026 23:17:28 +0330
Subject: [PATCH] Import source: src/components/ui/SegmentedControl

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
---
 src/components/ui/SegmentedControl.tsx | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 src/components/ui/SegmentedControl.tsx

diff --git a/src/components/ui/SegmentedControl.tsx b/src/components/ui/SegmentedControl.tsx
new file mode 100644
index 0000000..e270b11
--- /dev/null
+++ b/src/components/ui/SegmentedControl.tsx
@@ -0,0 +1,22 @@
+interface Option<T extends string> { label: string; value: T; }
+interface Props<T extends string> { options: Option<T>[]; value: T; onChange: (v: T) => void; }
+
+export function SegmentedControl<T extends string>({ options, value, onChange }: Props<T>) {
+  return (
+    <div className="flex gap-2">
+      {options.map(opt => (
+        <button
+          key={opt.value}
+          onClick={() => onChange(opt.value)}
+          className="px-4 py-2 rounded-[10px] text-sm font-medium transition-all duration-150 cursor-pointer"
+          style={value === opt.value
+            ? { background: '#7C6FE0', color: 'white', boxShadow: '0 2px 12px rgba(124,111,224,0.3)' }
+            : { background: 'var(--bg-elevated)', color: 'var(--text-secondary)', border: '1px solid var(--border-sub)' }
+          }
+        >
+          {opt.label}
+        </button>
+      ))}
+    </div>
+  );
+}