feat(expo): add StatusControl segmented picker component

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",
+  },
+});