From c7b2b8c2d04c99cd794396b705ddc093953bba65 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Wed, 15 Apr 2026 09:45:53 +0200
Subject: [PATCH] feat(expo): add StatusControl segmented picker component

---
 .../components/tasks/StatusControl.tsx        | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 xtablo-expo/components/tasks/StatusControl.tsx

diff --git a/xtablo-expo/components/tasks/StatusControl.tsx b/xtablo-expo/components/tasks/StatusControl.tsx
new file mode 100644
index 0000000..2700062
--- /dev/null
+++ b/xtablo-expo/components/tasks/StatusControl.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
+import { TaskStatus, TASK_STATUSES } from "@/types/tasks.types";
+import { useThemeColor } from "@/hooks/useThemeColor";
+
+type StatusControlProps = {
+  value: TaskStatus;
+  onChange: (status: TaskStatus) => void;
+};
+
+export default function StatusControl({ value, onChange }: StatusControlProps) {
+  const bgColor = useThemeColor({ light: "#f1f5f9", dark: "#1f2937" }, "background");
+
+  return (
+    <View style={[styles.container, { backgroundColor: bgColor }]}>
+      {TASK_STATUSES.map((status) => {
+        const isActive = value === status.value;
+        return (
+          <TouchableOpacity
+            key={status.value}
+            style={[
+              styles.segment,
+              isActive && { backgroundColor: status.color },
+            ]}
+            onPress={() => onChange(status.value)}
+          >
+            <Text
+              style={[
+                styles.label,
+                { color: isActive ? "#ffffff" : "#9ca3af" },
+              ]}
+              numberOfLines={1}
+            >
+              {status.label}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    borderRadius: 10,
+    padding: 3,
+    gap: 2,
+  },
+  segment: {
+    flex: 1,
+    paddingVertical: 8,
+    borderRadius: 8,
+    alignItems: "center",
+  },
+  label: {
+    fontSize: 11,
+    fontWeight: "600",
+  },
+});