1import { Button, ControlGroup, HStack, Navigation, NavigationStack, Script, Spacer, TextField, useState, VStack } from "scripting"
2
3function Example() {
4 const [text, setText] = useState("")
5
6 return <NavigationStack>
7 <VStack
8 navigationTitle={"Toolbars"}
9 navigationBarTitleDisplayMode={"inline"}
10 toolbar={{
11 topBarTrailing: [
12 <Button
13 title={"Select"}
14 action={() => { }}
15 />,
16 <ControlGroup
17 label={
18 <Button
19 title={"Add"}
20 systemImage={"plus"}
21 action={() => { }}
22 />
23 }
24 controlGroupStyle={"palette"}
25 >
26 <Button
27 title={"New"}
28 systemImage={"plus"}
29 action={() => { }}
30 />
31 <Button
32 title={"Import"}
33 systemImage={"square.and.arrow.down"}
34 action={() => { }}
35 />
36 </ControlGroup>
37 ],
38 bottomBar: [
39 <Button
40 title={"New Sub Category"}
41 action={() => { }}
42 />,
43 <Button
44 title={"Add category"}
45 action={() => { }}
46 />
47 ],
48 keyboard: <HStack
49 padding
50 >
51 <Spacer />
52 <Button
53 title={"Done"}
54 action={() => {
55 Keyboard.hide()
56 }}
57 />
58 </HStack>
59 }}
60 padding
61 >
62 <TextField
63 title={"TextField"}
64 value={text}
65 onChanged={setText}
66 textFieldStyle={"roundedBorder"}
67 prompt={"Focus to show the keyboard toolbar"}
68 />
69 </VStack>
70 </NavigationStack>
71}
72
73async function run() {
74 await Navigation.present({
75 element: <Example />
76 })
77
78 Script.exit()
79}
80
81run()
