1import { useState, useMemo, Color, Stepper, Text, VStack, RoundedRectangle, HStack, Spacer, NavigationStack, Navigation, Script } from "scripting"
2
3function Example() {
4 const [value, setValue] = useState(0)
5 const colors = useMemo<Color[]>(() => ['blue', 'red', 'green', 'purple'], [])
6 const color = colors[value]
7
8 function incrementStep() {
9 if (value + 1 >= colors.length) {
10 setValue(0)
11 } else {
12 setValue(value + 1)
13 }
14 }
15
16 function decrementStep() {
17 if (value - 1 < 0) {
18 setValue(colors.length - 1)
19 } else {
20 setValue(value - 1)
21 }
22 }
23
24 return <NavigationStack>
25 <VStack
26 navigationTitle={"Stepper"}
27 navigationBarTitleDisplayMode={"inline"}
28 >
29 <Stepper
30 title={"Stepper"}
31 onIncrement={incrementStep}
32 onDecrement={decrementStep}
33 />
34 <HStack>
35 <Text>Value: {value}</Text>
36 <Spacer />
37 <RoundedRectangle
38 fill={color}
39 cornerRadius={4}
40 frame={{
41 width: 120,
42 height: 30
43 }}
44 />
45 </HStack>
46 </VStack>
47 </NavigationStack>
48}
49
50async function run() {
51 await Navigation.present({
52 element: <Example />
53 })
54
55 Script.exit()
56}
57
58run()
