From 7a9dd33f3d234e61587cc65b6089731edcd5e851 Mon Sep 17 00:00:00 2001
From: Mayank <mayank.srmu@gmail.com>
Date: Wed, 21 Feb 2024 10:11:59 +0000
Subject: [PATCH] update examples

---
 packages/shared-ui/src/root/counter.tsx | 19 +++++++++++++++++++
 packages/shared-ui/src/root/display.tsx | 13 +++++++++++++
 packages/shared-ui/src/root/hero.tsx    | 21 +++++++++++++++++++--
 3 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 packages/shared-ui/src/root/counter.tsx
 create mode 100644 packages/shared-ui/src/root/display.tsx

diff --git a/packages/shared-ui/src/root/counter.tsx b/packages/shared-ui/src/root/counter.tsx
new file mode 100644
index 00000000..b995d660
--- /dev/null
+++ b/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>
+	);
+}
diff --git a/packages/shared-ui/src/root/display.tsx b/packages/shared-ui/src/root/display.tsx
new file mode 100644
index 00000000..ece0cf87
--- /dev/null
+++ b/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>
+	);
+}
diff --git a/packages/shared-ui/src/root/hero.tsx b/packages/shared-ui/src/root/hero.tsx
index 789e58d3..d1d37cee 100644
--- a/packages/shared-ui/src/root/hero.tsx
+++ b/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>
 	);