From 3d20083c60fefe6c069c8678bb3cfccb9492eac1 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Sun, 28 Apr 2024 20:21:42 +0900
Subject: [PATCH] chore: more example

---
 .../src/__snapshots__/basic.test.tsx.snap     | 10 +++++--
 examples/react-server/src/routes/_client.css  | 27 +++++++++++++++++++
 examples/react-server/src/routes/_client.tsx  |  5 ++--
 examples/react-server/src/routes/_server.css  |  8 +++---
 examples/react-server/src/routes/page.tsx     |  4 +--
 5 files changed, 44 insertions(+), 10 deletions(-)
 create mode 100644 examples/react-server/src/routes/_client.css

diff --git a/examples/react-server/src/__snapshots__/basic.test.tsx.snap b/examples/react-server/src/__snapshots__/basic.test.tsx.snap
index fdf237c6..6639ca24 100644
--- a/examples/react-server/src/__snapshots__/basic.test.tsx.snap
+++ b/examples/react-server/src/__snapshots__/basic.test.tsx.snap
@@ -33,12 +33,14 @@ exports[`basic 1`] = `
             0
           </div>
           <button
+            class="server-btn"
             name="value"
             value="-1"
           >
             -1
           </button>
           <button
+            class="server-btn"
             name="value"
             value="1"
           >
@@ -84,10 +86,14 @@ exports[`basic 1`] = `
           Count: 
           0
         </div>
-        <button>
+        <button
+          class="client-btn"
+        >
           -1
         </button>
-        <button>
+        <button
+          class="client-btn"
+        >
           +1
         </button>
       </div>
diff --git a/examples/react-server/src/routes/_client.css b/examples/react-server/src/routes/_client.css
new file mode 100644
index 00000000..1d241d9d
--- /dev/null
+++ b/examples/react-server/src/routes/_client.css
@@ -0,0 +1,27 @@
+/* based on https://github.com/remix-run/remix/blob/4a23e6e3a861238ea5ad285c7d436102bdd43564/templates/remix-tutorial/app/app.css#L32 */
+
+.client-btn {
+  background-color: #fdd;
+  font-size: 1rem;
+  font-family: inherit;
+  border: none;
+  border-radius: 8px;
+  padding: 0.5rem 0.75rem;
+  box-shadow:
+    0 0px 1px hsla(0, 0%, 0%, 0.2),
+    0 1px 2px hsla(0, 0%, 0%, 0.2);
+  line-height: 1.5;
+  margin: 0.4rem;
+  font-weight: 500;
+}
+
+.client-btn:hover {
+  box-shadow:
+    0 0px 1px hsla(0, 0%, 0%, 0.6),
+    0 1px 2px hsla(0, 0%, 0%, 0.2);
+}
+
+.client-btn:active {
+  box-shadow: 0 0px 1px hsla(0, 0%, 0%, 0.4);
+  transform: translateY(1px);
+}
diff --git a/examples/react-server/src/routes/_client.tsx b/examples/react-server/src/routes/_client.tsx
index 690c4360..cbe9006a 100644
--- a/examples/react-server/src/routes/_client.tsx
+++ b/examples/react-server/src/routes/_client.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import "./_client.css";
 import React from "react";
 import { checkAnswer } from "./_action";
 
@@ -16,10 +17,10 @@ export function ClientComponent() {
       <h4>Hello Client Component</h4>
       <div data-hydrated={hydrated}>hydrated: {String(hydrated)}</div>
       <div>Count: {count}</div>
-      <button className="btn" onClick={() => setCount((v) => v - 1)}>
+      <button className="client-btn" onClick={() => setCount((v) => v - 1)}>
         -1
       </button>
-      <button className="btn" onClick={() => setCount((v) => v + 1)}>
+      <button className="client-btn" onClick={() => setCount((v) => v + 1)}>
         +1
       </button>
     </div>
diff --git a/examples/react-server/src/routes/_server.css b/examples/react-server/src/routes/_server.css
index 43b1a0a5..fa894ca2 100644
--- a/examples/react-server/src/routes/_server.css
+++ b/examples/react-server/src/routes/_server.css
@@ -1,6 +1,7 @@
 /* based on https://github.com/remix-run/remix/blob/4a23e6e3a861238ea5ad285c7d436102bdd43564/templates/remix-tutorial/app/app.css#L32 */
 
-.btn {
+.server-btn {
+  background-color: #ddf;
   font-size: 1rem;
   font-family: inherit;
   border: none;
@@ -9,19 +10,18 @@
   box-shadow:
     0 0px 1px hsla(0, 0%, 0%, 0.2),
     0 1px 2px hsla(0, 0%, 0%, 0.2);
-  background-color: white;
   line-height: 1.5;
   margin: 0.4rem;
   font-weight: 500;
 }
 
-.btn:hover {
+.server-btn:hover {
   box-shadow:
     0 0px 1px hsla(0, 0%, 0%, 0.6),
     0 1px 2px hsla(0, 0%, 0%, 0.2);
 }
 
-.btn:active {
+.server-btn:active {
   box-shadow: 0 0px 1px hsla(0, 0%, 0%, 0.4);
   transform: translateY(1px);
 }
diff --git a/examples/react-server/src/routes/page.tsx b/examples/react-server/src/routes/page.tsx
index 1a3a00d1..82986487 100644
--- a/examples/react-server/src/routes/page.tsx
+++ b/examples/react-server/src/routes/page.tsx
@@ -36,10 +36,10 @@ function ServerActionDemo() {
       <h4>Hello Server Action</h4>
       <form action={changeCounter}>
         <div>Count: {getCounter()}</div>
-        <button className="btn" name="value" value={-1}>
+        <button className="server-btn" name="value" value={-1}>
           -1
         </button>
-        <button className="btn" name="value" value={+1}>
+        <button className="server-btn" name="value" value={+1}>
           +1
         </button>
       </form>