feat(demo): state

MM25Zamanian · MM25Zamanian · commit 6afa70d3f84c · 2024-07-06T20:13:34.000+03:30
diff --git a/demo/state/index.html b/demo/state/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en" class="color-scheme-auto bg-background font-vazirmatn">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Gecut Snack Bar</title>
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <script type="module" src="../main/global.ts"></script>
+    <script type="module" src="./scripts.ts"></script>
+  </head>
+  <body class="bg-surface max-w-screen-sm mx-auto p-4"></body>
+</html>
diff --git a/demo/state/scripts.ts b/demo/state/scripts.ts
@@ -0,0 +1,21 @@
+import {GecutState} from '@gecut/lit-helper';
+import {render, html} from 'lit/html.js';
+
+const str = new GecutState('string', '');
+const num = new GecutState('number', 0);
+const bool = new GecutState('boolean', false);
+
+render(
+  html`
+    <div class="mx-auto max-w-sm flex flex-col gap-4 relative h-full w-full">
+      <ol class="*:cursor-pointer *:select-none">
+        <li @click=${() => (str.value += 'Hello ')}>String: ${str.hydrate((data) => data)}</li>
+        <li @click=${() => (num.value = (num.value ?? 0) + 1_000)}>
+          Number: ${num.hydrate((data) => data.toLocaleString('Fa-Ir'))}
+        </li>
+        <li @click=${() => (bool.value = !bool.value)}>Boolean: ${bool.hydrate((data) => JSON.stringify(data))}</li>
+      </ol>
+    </div>
+  `,
+  document.body,
+);
