aboutsummaryrefslogtreecommitdiff
path: root/examples/framework-preact/src/components/Counter.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'examples/framework-preact/src/components/Counter.tsx')
-rw-r--r--examples/framework-preact/src/components/Counter.tsx30
1 files changed, 30 insertions, 0 deletions
diff --git a/examples/framework-preact/src/components/Counter.tsx b/examples/framework-preact/src/components/Counter.tsx
new file mode 100644
index 000000000..a63bf0cd7
--- /dev/null
+++ b/examples/framework-preact/src/components/Counter.tsx
@@ -0,0 +1,30 @@
+import type { ComponentChildren } from 'preact';
+import type { Signal } from '@preact/signals';
+import { lazy, Suspense } from 'preact/compat';
+import './Counter.css';
+
+const Message = lazy(async () => import('./Message'));
+const Fallback = () => <p>Loading...</p>;
+
+type Props = {
+ children: ComponentChildren;
+ count: Signal<number>;
+};
+
+export default function Counter({ children, count }: Props) {
+ const add = () => count.value++;
+ const subtract = () => count.value--;
+
+ return (
+ <>
+ <div class="counter">
+ <button onClick={subtract}>-</button>
+ <pre>{count}</pre>
+ <button onClick={add}>+</button>
+ </div>
+ <Suspense fallback={Fallback}>
+ <Message>{children}</Message>
+ </Suspense>
+ </>
+ );
+}