1import { HStack, Label, List, Navigation, NavigationSplitView, Script, Text, useState, VStack } from "scripting"
2
3type Department = {
4 name: string
5 staff: Person[]
6}
7
8type Company = {
9 name: string
10 departments: Department[]
11}
12
13type Person = {
14 name: string
15 phoneNumber: string
16}
17
18const companyA: Company = {
19 name: "Company A",
20 departments: [
21 {
22 name: "Sales",
23 staff: [
24 {
25 name: "Juan Chavez",
26 phoneNumber: "(408) 555-4301",
27 },
28 {
29 name: "Mei Chen",
30 phoneNumber: "(919) 555-2481",
31 }
32 ]
33 },
34 {
35 name: "Engineering",
36 staff: [
37 {
38 name: "Bill James",
39 phoneNumber: "(408) 555-4450"
40 },
41 {
42 name: "Anne Johnson",
43 phoneNumber: "(417) 555-9311"
44 }
45 ]
46 }
47 ]
48}
49
50function PersonRowView({
51 person
52}: {
53 person: Person
54}) {
55 return <VStack
56 alignment={"leading"}
57 spacing={3}
58 >
59 <Text
60 foregroundStyle={"label"}
61 font={"headline"}
62 >{person.name}</Text>
63 <HStack
64 spacing={3}
65 foregroundStyle={"secondaryLabel"}
66 font={"subheadline"}
67 >
68 <Label
69 title={person.phoneNumber}
70 systemImage={"phone"}
71 />
72 </HStack>
73 </VStack>
74}
75
76function PersonDetailView({
77 person
78}: {
79 person: Person
80}) {
81
82 return <VStack>
83 <Text
84 font={"title"}
85 foregroundStyle={"label"}
86 >{person.name}</Text>
87 <HStack
88 foregroundStyle={"secondaryLabel"}
89 >
90 <Label
91 title={person.phoneNumber}
92 systemImage={"phone"}
93 />
94 </HStack>
95 </VStack>
96}
97
98function Example() {
99 const [selectedPerson, setSelectedPerson] = useState<Person>()
100
101 return <NavigationSplitView
102 sidebar={
103 <List>
104 {companyA.departments[0].staff.map(person =>
105 <PersonRowView
106 person={person}
107 contentShape={"rect"}
108 onTapGesture={() => {
109 setSelectedPerson(person)
110 }}
111 />
112 )}
113 </List>
114 }
115 >
116 {selectedPerson != null
117 ? <PersonDetailView
118 person={selectedPerson}
119 />
120 : <Text>Please select a person.</Text>
121 }
122 </NavigationSplitView>
123}
124
125async function run() {
126 await Navigation.present({
127 element: <Example />
128 })
129
130 Script.exit()
131}
132
133run()
