1import { Color, List, Navigation, NavigationLink, NavigationStack, Script, Text, VStack } from "scripting"
2
3function NavigationDetailView({
4 color
5}: {
6 color: Color
7}) {
8
9 return <VStack
10 navigationContainerBackground={color}
11 frame={{
12 maxWidth: "infinity",
13 maxHeight: "infinity"
14 }}
15 >
16 <Text>{color}</Text>
17 </VStack>
18}
19
20
21function Example() {
22 const colors: Color[] = [
23 "red", "green", "blue", "orange", "purple"
24 ]
25
26 return <NavigationStack>
27 <List
28 navigationTitle={"NavigationStack with links"}
29 navigationBarTitleDisplayMode={"inline"}
30 >
31 {colors.map(color =>
32 <NavigationLink
33 destination={
34 <NavigationDetailView
35 color={color}
36 />
37 }
38 >
39 <Text>Navigation to {color} view</Text>
40 </NavigationLink>
41 )}
42 </List>
43 </NavigationStack>
44}
45
46async function run() {
47 await Navigation.present({
48 element: <Example />
49 })
50
51 Script.exit()
52}
53
54run()
