60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
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",
|
|
},
|
|
});
|