1import { useState, List, ContentUnavailableView, Button, Text, NavigationStack, Navigation, Script } from "scripting"
2
3function Example() {
4 const [list, setList] = useState<string[]>([])
5
6 return <NavigationStack>
7 <List
8 navigationTitle={"ContentUnavailableView"}
9 navigationBarTitleDisplayMode={"inline"}
10 overlay={
11 list.length ? undefined
12 : <ContentUnavailableView
13 title="No data"
14 systemImage="tray.fill"
15 />
16 }
17 toolbar={{
18 bottomBar: [
19 <Button
20 title="Add"
21 action={() => {
22 setList(list => {
23 let newList = [
24 (Math.random() * 1000 | 0).toString(),
25
26 ...list
27 ]
28 return newList
29 })
30 }}
31 />,
32 <Button
33 title="Clear"
34 action={() => {
35 setList([])
36 }}
37 />
38 ]
39 }}
40 >
41 {list.map(name => <Text>{name}</Text>)}
42 </List>
43 </NavigationStack>
44}
45
46async function run() {
47 await Navigation.present({
48 element: <Example />
49 })
50
51 Script.exit()
52}
53
54run()
