1import { HStack, Label, List, Navigation, NavigationStack, Script, Text, VStack } from "scripting"
2
3type Person = {
4 name: string
5 phoneNumber: string
6}
7
8function PersonRowView({
9 person
10}: {
11 person: Person
12}) {
13 return <VStack
14 alignment={"leading"}
15 spacing={3}
16 >
17 <Text
18 foregroundStyle={"label"}
19 font={"headline"}
20 >{person.name}</Text>
21 <HStack
22 spacing={3}
23 foregroundStyle={"secondaryLabel"}
24 font={"subheadline"}
25 >
26 <Label
27 title={person.phoneNumber}
28 systemImage={"phone"}
29 />
30 </HStack>
31 </VStack>
32}
33
34function Example() {
35 const staff: Person[] = [
36 {
37 name: "Juan Chavez",
38 phoneNumber: "(408) 555-4301",
39 },
40 {
41 name: "Mei Chen",
42 phoneNumber: "(919) 555-2481"
43 }
44 ]
45
46 return <NavigationStack>
47 <List
48 navigationTitle={"Display data inside a row"}
49 navigationBarTitleDisplayMode={"inline"}
50 >
51 {staff.map(person =>
52 <PersonRowView
53 person={person}
54 />
55 )}
56 </List>
57 </NavigationStack>
58}
59
60async function run() {
61 await Navigation.present({
62 element: <Example />
63 })
64
65 Script.exit()
66}
67
68run()
