Properly assign the values in server side

Signed-off-by: Ayase Minori <chinodesuuu@gmail.com>

islands/CounterCard.tsx

@@ -4,10 +4,10 @@ import { useState, useEffect } from "preact/hooks";
 
 interface SharedProps {
   hasClicked: Signal<boolean>;
+  globalCount: string;
 }
 
 export default function Counter(props: SharedProps) {
-  const globalCount = useState(0);
   const count = useState(0);
   const onClick = () => {
 
@@ -55,7 +55,7 @@ export default function Counter(props: SharedProps) {
         <Button onClick={onClick}>Squish that button</Button>
       </div>
       <div class="px-6 pt-4 pb-2">
-        <p>Everyone has clicked the button {globalCount} times!</p>
+        <p>Everyone has clicked the button {parseInt(props.globalCount)} times!</p>
       </div>
     </div>
   );

routes/index.tsx

@@ -39,7 +39,7 @@ export const handler: Handlers = {
   }
 }
 
-export default function Home(data: number) {
+export default function Home(data: string) {
   const hasClicked = useSignal(false);
   return (
     <div class="px-4 py-8 mx-auto bg-[#9d88d3]">
@@ -49,7 +49,9 @@ export default function Home(data: number) {
           Try updating this message in the
           <code class="mx-2">./routes/index.tsx</code> file, and refresh.
         </p>
-        <Counter hasClicked={hasClicked}/>
+        <Counter 
+        globalCount={data}
+        hasClicked={hasClicked}/>
       </div>
     </div>
   );