44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
|
import type { ComputerMode } from "@rakazo/contracts";
|
||
|
|
import { Pressable, Text, View } from "react-native";
|
||
|
|
|
||
|
|
export function ComputerModePicker({
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
disabled = false,
|
||
|
|
}: {
|
||
|
|
value: ComputerMode | undefined;
|
||
|
|
onChange: (mode: ComputerMode) => void;
|
||
|
|
disabled?: boolean;
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<View style={{ marginTop: 16 }}>
|
||
|
|
<Text style={{ color: "#85858A", marginBottom: 8, fontSize: 14 }}>Computer</Text>
|
||
|
|
<View style={{ flexDirection: "row", gap: 8 }}>
|
||
|
|
{(["team", "dedicated"] as const).map((mode) => (
|
||
|
|
<Pressable
|
||
|
|
key={mode}
|
||
|
|
accessibilityRole="button"
|
||
|
|
accessibilityState={{ selected: value === mode }}
|
||
|
|
disabled={disabled}
|
||
|
|
onPress={() => onChange(mode)}
|
||
|
|
style={{
|
||
|
|
flex: 1,
|
||
|
|
alignItems: "center",
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: value === mode ? "#6C6C70" : "#26262A",
|
||
|
|
backgroundColor: value === mode ? "#1A1A1D" : "transparent",
|
||
|
|
borderRadius: 11,
|
||
|
|
paddingVertical: 12,
|
||
|
|
opacity: disabled ? 0.5 : 1,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Text style={{ color: value === mode ? "#ECECEE" : "#85858A" }}>
|
||
|
|
{mode === "team" ? "Team" : "Private"}
|
||
|
|
</Text>
|
||
|
|
</Pressable>
|
||
|
|
))}
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
}
|