1import { Capsule, Circle, Ellipse, List, Navigation, NavigationStack, Rectangle, RoundedRectangle, Script, Section, Text, UnevenRoundedRectangle, } from "scripting"
2
3function Example() {
4
5 return <NavigationStack>
6 <List
7 navigationTitle={"Shapes"}
8 navigationBarTitleDisplayMode={"inline"}
9 >
10 <Section
11 header={
12 <Text>Rectangle</Text>
13 }
14 >
15 <Rectangle
16 fill={"orange"}
17 stroke={{
18 shapeStyle: "red",
19 strokeStyle: {
20 lineWidth: 3,
21 }
22 }}
23 frame={{
24 width: 100,
25 height: 100,
26 }}
27 />
28 </Section>
29
30 <Section
31 header={
32 <Text>RoundedRectangle</Text>
33 }
34 >
35 <RoundedRectangle
36 fill={"blue"}
37 cornerRadius={16}
38 frame={{
39 width: 100,
40 height: 100,
41 }}
42 />
43 </Section>
44
45 <Section
46 header={
47 <Text>Circle</Text>
48 }
49 >
50 <Circle
51 stroke={{
52 shapeStyle: "purple",
53 strokeStyle: {
54 lineWidth: 4,
55 }
56 }}
57 frame={{
58 width: 100,
59 height: 100,
60 }}
61 />
62 </Section>
63
64 <Section
65 header={
66 <Text>Capsule</Text>
67 }
68 >
69 <Capsule
70 fill={"systemIndigo"}
71 frame={{
72 width: 100,
73 height: 40,
74 }}
75 />
76 </Section>
77
78 <Section
79 header={
80 <Text>Ellipse</Text>
81 }
82 >
83 <Ellipse
84 fill={"green"}
85 frame={{
86 width: 40,
87 height: 100,
88 }}
89 />
90 </Section>
91
92 <Section
93 header={
94 <Text>UnevenRoundedRectangle</Text>
95 }
96 >
97 <UnevenRoundedRectangle
98 fill={"brown"}
99 topLeadingRadius={16}
100 topTrailingRadius={0}
101 bottomLeadingRadius={0}
102 bottomTrailingRadius={16}
103 frame={{
104 width: 100,
105 height: 50,
106 }}
107 />
108 </Section>
109 </List>
110 </NavigationStack>
111}
112
113async function run() {
114 await Navigation.present({
115 element: <Example />
116 })
117
118 Script.exit()
119}
120
121run()
