1import { useState, Color, NavigationStack, List, Text, HStack, Spacer, Image, VStack, Navigation, Script } 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
20function Example() {
21 const colors: Color[] = [
22 "red", "green", "blue", "orange", "purple"
23 ]
24 const [selectedColor, setSelectedColor] = useState<Color | null>()
25
26 return <NavigationStack>
27 <List
28 navigationTitle={"With Navigation Destination"}
29 navigationDestination={{
30 isPresented: selectedColor != null,
31 onChanged: value => {
32 if (!value) {
33 setSelectedColor(null)
34 }
35 },
36 content: selectedColor != null
37 ? <NavigationDetailView
38 color={selectedColor}
39 />
40 : <Text>Select a color</Text>
41 }}
42 >
43 {colors.map(color =>
44 <HStack
45 contentShape={"rect"}
46 onTapGesture={() => {
47 setSelectedColor(color)
48 }}
49 >
50 <Text>Navigation to {color} view</Text>
51 <Spacer />
52 <Image
53 systemName={"chevron.right"}
54 foregroundStyle={"secondaryLabel"}
55 />
56 </HStack>
57 )}
58 </List>
59 </NavigationStack>
60}
61
62async function run() {
63 await Navigation.present({
64 element: <Example />
65 })
66
67 Script.exit()
68}
69
70run()
