1import { Button, Font, ForEach, List, Navigation, NavigationStack, Script, Section, Text, useObservable, VStack } from "scripting"
2
3function Example() {
4 const dismiss = Navigation.useDismiss()
5
6 const namedFonts = useObservable(() => {
7 return [
8 "largeTitle",
9 "title",
10 "headline",
11 "body",
12 "caption"
13 ].map(e => ({
14 id: e,
15 name: e as Font
16 }))
17 })
18
19 return <NavigationStack>
20 <List
21 navigationTitle={"Iterating"}
22 navigationBarTitleDisplayMode={"inline"}
23 toolbar={{
24 cancellationAction: <Button
25 title={"Done"}
26 action={dismiss}
27 />
28 }}
29 >
30 <Section
31 header={
32 <Text
33 textCase={null}
34 >ForEach</Text>
35 }
36 >
37 <ForEach
38 data={namedFonts}
39 builder={(namedFont) => {
40 return <Text
41 key={namedFont.id}
42 font={namedFont.name}
43 >{namedFont.name}</Text>
44 }}
45 />
46 </Section>
47
48 <Section
49 header={
50 <Text
51 textCase={null}
52 >Iterating in code block</Text>
53 }
54 >
55 <VStack>
56 {namedFonts.value.map(namedFont =>
57 <Text
58 font={namedFont.name}
59 >{namedFont.name}</Text>
60 )}
61 </VStack>
62 </Section>
63 </List>
64 </NavigationStack>
65}
66
67async function run() {
68 await Navigation.present({
69 element: <Example />
70 })
71
72 Script.exit()
73}
74
75run()
