1import { Color, LazyHGrid, 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={"LazyHGrid"}
33 navigationBarTitleDisplayMode={"inline"}
34 axes={"horizontal"}
35 >
36 <LazyHGrid
37 spacing={2}
38 rows={[
39 { size: 100 },
40 { size: 100 },
41 { size: 100 },
42 { size: 100 },
43 ]}
44 >
45 {colors.map((color) =>
46 <VStack>
47 <Text>
48 {color.name}
49 </Text>
50 <RoundedRectangle
51 fill={color.value}
52 cornerRadius={4}
53 frame={{
54 width: 50,
55 height: 50
56 }}
57 />
58 </VStack>
59 )}
60 </LazyHGrid>
61 </ScrollView>
62 </NavigationStack>
63}
64
65async function run() {
66 await Navigation.present({
67 element: <Example />
68 })
69 Script.exit()
70}
71
72run()
