Sync from a8e1c0a7402940e0fc5beef669522b315052df1blatest

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>
+		</>
+	);
+}