1import { DisclosureGroup, HStack, Label, List, Navigation, NavigationLink, NavigationStack, Script, Text, VStack } from "scripting"
2
3type Person = {
4 name: string
5 phoneNumber: string
6}
7
8type Department = {
9 name: string
10 staff: Person[]
11}
12
13type Company = {
14 name: string
15 departments: Department[]
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 Example() {
77
78 return <NavigationStack>
79 <List
80 navigationTitle={"Staff Directory"}
81 navigationBarTitleDisplayMode={"inline"}
82 >
83 {companyA.departments.map(department =>
84 <DisclosureGroup
85 title={department.name}
86 >
87 {department.staff.map(person =>
88 <NavigationLink
89 destination={
90 <PersonDetailView
91 person={person}
92 />
93 }
94 >
95 <PersonRowView
96 person={person}
97 />
98 </NavigationLink>
99 )}
100 </DisclosureGroup>
101 )}
102 </List>
103 </NavigationStack>
104}
105
106function PersonDetailView({
107 person
108}: {
109 person: Person
110}) {
111
112 return <VStack>
113 <Text
114 font={"title"}
115 foregroundStyle={"label"}
116 >{person.name}</Text>
117 <HStack
118 foregroundStyle={"secondaryLabel"}
119 >
120 <Label
121 title={person.phoneNumber}
122 systemImage={"phone"}
123 />
124 </HStack>
125 </VStack>
126}
127
128async function run() {
129 await Navigation.present({
130 element: <Example />
131 })
132
133 Script.exit()
134}
135
136run()
