Update styles

packages/shared/src/client/demo/demo.module.scss

@@ -1,45 +1,59 @@
 .codeDisplay {
-    padding: 10px;
-    .hide {
+  padding: 10px;
+  .hide {
+    display: none;
+  }
+  summary {
+    cursor: pointer;
+  }
+  &[open] {
+    .show {
       display: none;
     }
-    summary {
-      cursor: pointer;
+    .hide {
+      display: inline;
     }
-    &[open] {
-      .show {
-        display: none;
+  }
+  .tabs {
+    margin-bottom: -10px;
+    text-wrap: nowrap;
+    overflow: auto;
+    button {
+      all: unset;
+      cursor: pointer;
+      padding: 10px 20px;
+      &.active {
+        background: #2465;
       }
-      .hide {
-        display: inline;
-      }
-    }
-    .tabs {
-      margin-bottom: -10px;
-      text-wrap: nowrap;
-      overflow: auto;
-      button {
-        all: unset;
-        cursor: pointer;
-        padding: 10px 20px;
-        &.active {
-          background: #2465;
-        }
-        &:hover {
-          background: #2495;
-        }
+      &:hover {
+        background: #2495;
       }
     }
+  }
 }
 
 .flex {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
-  gap: 20px;
+  gap: 25px;
+  & > * {
+    box-shadow: 0 0 5px red;
+    padding: 20px;
+    border-radius: 10px;
+  }
+}
+.header {
+  display: flex;
+  box-shadow: 0 0 5px red;
+  align-items: center;
+  margin: 0 -30px;
+  margin-bottom: 30px;
+  padding: 0 30px;
+  justify-content: center;
+  gap: 35px;
 }
-
 .demo {
   width: var(--max-width);
   max-width: 95vw;
@@ -53,7 +67,7 @@
   & > * {
     flex-grow: 1;
   }
-  
+
   img {
     display: block;
     max-width: 500px;
@@ -65,6 +79,10 @@
   h2 {
     text-align: center;
   }
+  button {
+    cursor: pointer;
+    margin: 5px 10px;
+  }
 }
 
 .preview {

packages/shared/src/client/demo/demo.tsx

@@ -9,6 +9,9 @@ import { WithSelector } from "./with-selectors";
 import withSelectorCode from "./with-selectors/with-selectors.tsx?raw";
 import storeCode from "./with-selectors/store.ts?raw";
 import couter2Code from "./with-selectors/counter.tsx?raw";
+import counterWithoutSelectorscode from "./with-selectors/counter-without-selectors.tsx?raw";
+import headerCode from "./with-selectors/header.tsx?raw";
+import userDataCode from "./with-selectors/user-data.tsx?raw";
 
 const basicExCode = [
   { filename: "counter.tsx", code: counterCode },
@@ -17,7 +20,10 @@ const basicExCode = [
 
 const withSelectorExCode = [
   { filename: "store.ts", code: storeCode },
+  { filename: "header.tsx", code: headerCode },
   { filename: "counter.tsx", code: couter2Code },
+  { filename: "counter-without-selectors.tsx", code: counterWithoutSelectorscode },
+  { filename: "user-data.tsx", code: userDataCode },
   { filename: "with-selectors.tsx", code: withSelectorCode },
 ];
 

packages/shared/src/client/demo/with-selectors/counter-without-selectors.tsx

@@ -7,8 +7,8 @@ export function CounterWithoutSelectors() {
   renderCount.current++;
   return (
     <div>
-      <h1>Counter Without Selectors</h1>
-      <h2>Rerender is triggered every time the state changes.</h2>
+      <h2>Counter Without Selectors</h2>
+      <p>Rerender is triggered every time the state changes.</p>
       <p>Count: {count}</p>
       <button onClick={() => setState(state => ({ ...state, count: count + 1 }))}>Increment</button>
       <button onClick={() => setState(state => ({ ...state, count: count - 1 }))}>Decrement</button>

packages/shared/src/client/demo/with-selectors/counter.tsx

@@ -7,8 +7,8 @@ export function Counter() {
   renderCount.current++;
   return (
     <div>
-      <h1>Counter With Selectors</h1>
-      <h2>Rerender is triggered by RGS only when count changes.</h2>
+      <h2>Counter With Selectors</h2>
+      <p>Rerender is triggered by RGS only when count changes.</p>
       <p>Count: {count}</p>
       <button onClick={() => setState(state => ({ ...state, count: count + 1 }))}>Increment</button>
       <button onClick={() => setState(state => ({ ...state, count: count - 1 }))}>Decrement</button>

packages/shared/src/client/demo/with-selectors/header.tsx

@@ -1,12 +1,13 @@
 import { useRef } from "react";
 import { useStore } from "./store";
+import styles from "../demo.module.scss";
 
 export function Header() {
   const [{ name }] = useStore("name");
   const renderCount = useRef(0);
   renderCount.current++;
   return (
-    <header>
+    <header className={styles.header}>
       <h1>My name is {name}</h1>
       <small>
         <i>

packages/shared/src/client/demo/with-selectors/with-selectors.tsx

@@ -8,9 +8,11 @@ export function WithSelector() {
   return (
     <div className={styles.preview}>
       <Header />
-      <Counter />
-      <CounterWithoutSelectors />
-      <UserData />
+      <div className={styles.flex}>
+        <Counter />
+        <CounterWithoutSelectors />
+        <UserData />
+      </div>
     </div>
   );
 }