Merge pull request #8412 from igrep/tutorial-fix-show-me-button

docs: "Show Me" button state in tutorial is not in sync with code

Author: wmertens

packages/docs/src/routes/tutorial/layout.tsx

@@ -31,6 +31,7 @@ export default component$(() => {
       entryStrategy: 'segment',
       files: [],
       version: '',
+      isShowingSolution: false,
     };
     return initStore;
   });
@@ -47,6 +48,7 @@ export default component$(() => {
     store.appId = t.app.id;
     store.prev = t.prev;
     store.next = t.next;
+    store.isShowingSolution = false;
   });
 
   return (
@@ -166,6 +168,7 @@ export interface TutorialStore extends ReplAppInput {
   app: TutorialApp;
   prev: TutorialApp | undefined;
   next: TutorialApp | undefined;
+  isShowingSolution: boolean;
 }
 
 export const PANELS = ['Tutorial', 'Input', 'Output'];

packages/docs/src/routes/tutorial/tutorial-content-footer.tsx

@@ -1,20 +1,18 @@
-import { component$, useSignal } from '@builder.io/qwik';
+import { component$ } from '@builder.io/qwik';
 import { ensureDefaultFiles, type TutorialStore } from './layout';
 import { Link } from '@builder.io/qwik-city';
 
 export const TutorialContentFooter = component$(({ store }: TutorialContentFooterProps) => {
-  let solutionViewSig = useSignal(false);
-
   return (
     <div class="content-footer">
       <div>
-        {solutionViewSig.value ? (
+        {store.isShowingSolution ? (
           <button
             preventdefault:click
             class="show-me"
             onClick$={() => {
               store.files = ensureDefaultFiles(store.app.problemInputs);
-              solutionViewSig.value = false;
+              store.isShowingSolution = false;
             }}
             type="button"
           >
@@ -26,7 +24,7 @@ export const TutorialContentFooter = component$(({ store }: TutorialContentFoote
             class="show-me"
             onClick$={() => {
               store.files = ensureDefaultFiles(store.app.solutionInputs);
-              solutionViewSig.value = true;
+              store.isShowingSolution = true;
             }}
             type="button"
           >