update examples

packages/shared-ui/src/root/counter.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import useRGS from "r18gs";
+
+export default function Counter() {
+	const [count, setCount] = useRGS("count", 0);
+	return (
+		<div>
+			<h2>Clinet component 1</h2>
+			<input
+				onChange={e => {
+					setCount(parseInt(e.target.value.trim()));
+				}}
+				type="number"
+				value={count}
+			/>
+		</div>
+	);
+}

packages/shared-ui/src/root/display.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import useRGS from "r18gs";
+
+export default function Display() {
+	const [count] = useRGS<number>("count");
+	return (
+		<div>
+			<h2>Client component 2</h2>
+			<b>{count}</b>
+		</div>
+	);
+}

packages/shared-ui/src/root/hero.tsx

@@ -1,14 +1,31 @@
 import styles from "../root-layout.module.css";
 import { Logo } from "../common/logo";
+import Counter from "./counter";
+import Display from "./display";
 
 export function Hero() {
 	return (
 		<div className={styles.center}>
 			<div>
 				<h1>
-					Build with <Logo />
+					Share global client state with <Logo />
 				</h1>
-				<p>Unleash the power of React Server Components!</p>
+				<p>
+					Unleash the power of React Server Components! No wrapper required.
+					<br /> Supports tree shakable libraries.
+				</p>
+				<br />
+				<br />
+				<br />
+				<p>Sharing state between client components without any wrapper or provider.</p>
+				<div className={styles.center}>
+					<Counter />
+					<Display />
+				</div>
+				<div className={styles.center}>
+					<Counter />
+					<Display />
+				</div>
 			</div>
 		</div>
 	);