Open History to see the last commit
1import { Pressable } from "react-native";
2import type { EnvironmentMachineKind } from "@t3tools/contracts";
3import type { EnvironmentConnectionPhase } from "@t3tools/client-runtime/connection";
4import { EnvironmentMachineSymbol } from "../../components/EnvironmentMachineSymbol";
5import { AppText as Text } from "../../components/ui/AppText";
6import { SymbolView } from "../../components/ui/AppSymbol";
7
8import { ConnectionStatusDot } from "../connection/ConnectionStatusDot";
9
10export function DraftEnvironmentControl(props: {
11 readonly label: string;
12 readonly connectionState: EnvironmentConnectionPhase;
13 readonly machineKind: EnvironmentMachineKind;
14 readonly disabled: boolean;
15 readonly onChooseEnvironment: () => void;
16}) {
17 const disconnected = props.connectionState !== "connected";
18 return (
19 <Pressable
20 accessibilityRole="button"
21 accessibilityLabel={`Choose environment, ${props.label}, ${disconnected ? "Offline" : "Connected"}`}
22 disabled={props.disabled}
23 onPress={props.onChooseEnvironment}
24 className="flex-row items-center gap-1.5 rounded-xl px-3 py-2 active:opacity-65"
25 >
26 <EnvironmentMachineSymbol
27 kind={props.machineKind}
28 size={13}
29 tintColorClassName="accent-icon-muted"
30 />
31 <Text className="shrink text-sm text-foreground-muted" numberOfLines={1}>
32 on {props.label}
33 </Text>
34 <SymbolView name="chevron.right" size={11} tintColorClassName="accent-icon-muted" />
35 {disconnected ? <ConnectionStatusDot state="error" pulse={false} size={6} /> : null}
36 </Pressable>
37 );
38}