1import { HStack, Label, List, Navigation, NavigationStack, Script, Section, Text, 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 Example() {
77 return <NavigationStack>
78 <List
79 navigationTitle={"Represent data hierarchy in sections"}
80 navigationBarTitleDisplayMode={"inline"}
81 >
82 {companyA.departments.map(department =>
83 <Section
84 header={
85 <Text>{department.name}</Text>
86 }
87 >
88 {department.staff.map(person =>
89 <PersonRowView
90 person={person}
91 />
92 )}
93 </Section>
94 )}
95 </List>
96 </NavigationStack>
97}
98
99async function run() {
100 await Navigation.present({
101 element: <Example />
102 })
103
104 Script.exit()
105}
106
107run()
