1import type { EnvironmentId } from "@t3tools/contracts";
2import type { ComponentProps } from "react";
3import { View } from "react-native";
4
5import { SymbolView } from "../../components/ui/AppSymbol";
6import { AppText as Text } from "../../components/ui/AppText";
7import { ConnectionEnvironmentRow } from "./ConnectionEnvironmentRow";
8
9type EnvironmentRowProps = ComponentProps<typeof ConnectionEnvironmentRow>;
10
11export function LocalEnvironmentList({
12 environments,
13 expandedId,
14 onToggle,
15 ...rowActions
16}: Pick<
17 EnvironmentRowProps,
18 "onReconnect" | "onRemove" | "onSetEnabled" | "onUpdate" | "opensDetails"
19> & {
20 readonly environments: ReadonlyArray<EnvironmentRowProps["environment"]>;
21 readonly expandedId: EnvironmentId | null;
22 readonly onToggle: (environmentId: EnvironmentId) => void;
23}) {
24 if (environments.length === 0) {
25 return (
26 <View
27 collapsable={false}
28 className="items-center gap-3 rounded-[24px] bg-grouped-card px-6 py-8"
29 >
30 <View className="h-12 w-12 items-center justify-center rounded-[16px] bg-subtle">
31 <SymbolView
32 name="point.3.connected.trianglepath.dotted"
33 size={20}
34 tintColorClassName="accent-icon-muted"
35 type="monochrome"
36 />
37 </View>
38 <Text className="text-center text-sm leading-normal text-foreground-muted">
39 No environments connected yet.{"\n"}Tap{" "}
40 <Text className="font-t3-bold text-foreground">+</Text> to add one.
41 </Text>
42 </View>
43 );
44 }
45
46 return (
47 <View collapsable={false} className="overflow-hidden rounded-[24px] bg-grouped-card">
48 {environments.map((environment) => (
49 <View key={environment.environmentId} collapsable={false}>
50 <ConnectionEnvironmentRow
51 environment={environment}
52 expanded={expandedId === environment.environmentId}
53 onToggle={() => onToggle(environment.environmentId)}
54 {...rowActions}
55 />
56 </View>
57 ))}
58 </View>
59 );
60}