🆕 Add new UI scripts and update gitignore to ignore cache directory

2026-04-27 00:40:45 +08:00
parent b91f50f26c
commit 42fb760b70
4 changed files with 93 additions and 0 deletions
@@ -0,0 +1,53 @@
+import {
+    App,
+    Text,
+    Button,
+    TextField,
+    VStack,
+    HStack,
+    State,
+    ForEach,
+    Spacer,
+    Divider,
+} from "perry/ui"
+
+const todos = State<string[]>([])
+const count = State(0)
+const input = State("")
+
+App({
+    title: "Todo App",
+    width: 480,
+    height: 600,
+    body: VStack(16, [
+        Text("My Todos"),
+
+        HStack(8, [
+            TextField("What needs to be done?", (value: string) => input.set(value)),
+            Button("Add", () => {
+                const text = input.value
+                if (text.length > 0) {
+                    todos.set([...todos.value, text])
+                    count.set(count.value + 1)
+                    input.set("")
+                }
+            }),
+        ]),
+
+        Divider(),
+
+        ForEach(count, (i: number) =>
+            HStack(8, [
+                Text(todos.value[i]),
+                Spacer(),
+                Button("Delete", () => {
+                    todos.set(todos.value.filter((_, idx) => idx !== i))
+                    count.set(count.value - 1)
+                }),
+            ]),
+        ),
+
+        Spacer(),
+        Text(`${count.value} items`),
+    ]),
+})