1import { Color, LazyVGrid, Navigation, NavigationStack, RoundedRectangle, Script, ScrollView, Text, useMemo, VStack } from "scripting"
2
3function Example() {
4 const colors = useMemo(() => {
5 const colors: {
6 name: string
7 value: Color
8 }[] = []
9
10 const numToHex = (n: number) => {
11 return n === 0 ? '00' : n.toString(16)
12 }
13
14 for (let r = 0x00; r <= 0xff; r += 0x11) {
15 for (let g = 0x00; g <= 0xff; g += 0x11) {
16 for (let b = 0x00; b <= 0xff; b += 0x11) {
17 const name = `${numToHex(r)}${numToHex(g)}${numToHex(b)}`
18 const value: Color = `#${name}`
19 colors.push({
20 name,
21 value
22 })
23 }
24 }
25 }
26
27 return colors
28 }, [])
29
30 return <NavigationStack>
31 <ScrollView
32 navigationTitle={"LazyVGrid"}
33 navigationBarTitleDisplayMode={"inline"}
34 >
35 <LazyVGrid
36 spacing={2}
37 columns={[
38 { size: 100 },
39 { size: 100 },
40 { size: 100 },
41 { size: 100 },
42 ]}
43 >
44 {colors.map((color) =>
45 <VStack>
46 <Text>
47 {color.name}
48 </Text>
49 <RoundedRectangle
50 fill={color.value}
51 cornerRadius={4}
52 frame={{
53 width: 50,
54 height: 50
55 }}
56 />
57 </VStack>
58 )}
59 </LazyVGrid>
60 </ScrollView>
61 </NavigationStack>
62}
63
64async function run() {
65 await Navigation.present({
66 element: <Example />
67 })
68 Script.exit()
69}
70
71run()
