feat(playground): Add 'Open in Playground' button to learning modules

src/App.tsx

@@ -1,5 +1,19 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import { useEffect, useState, lazy, Suspense } from "react";
-import { App as AntdApp, Layout, Spin } from "antd";
+import { App as AntdApp, Layout, Spin, ConfigProvider } from "antd";
 import { LoadingOutlined } from "@ant-design/icons";
 import { Routes, Route, useSearchParams, useNavigate } from "react-router-dom";
 import Navbar from "./components/Navbar";
@@ -96,57 +110,65 @@ const App = () => {
   }, [backgroundColor]);
 
   return (
-    <AntdApp>
-      <Layout style={{ height: "100vh" }}>
-        <Navbar />
-        <Layout
-          className="app-layout"
-          style={{
-            backgroundColor,
-            height: "calc(100vh - 64px)",
-            marginTop: "64px",
-            overflow: "hidden",
-          }}
-        >
-          <Routes>
-            <Route
-              path="/"
-              element={
-                <>
-                  <PlaygroundSidebar />
-                  <Content style={{ marginLeft: "64px" }}>
-                    {loading ? (
-                      <div className="app-content-loading">
-                        <Spinner />
-                      </div>
-                    ) : (
-                      <div className="app-main-content">
-                        <Suspense fallback={<div className="app-content-loading"><Spinner /></div>}>
-                          <MainContainer />
-                        </Suspense>
-                      </div>
-                    )}
-                  </Content>
-                </>
-              }
-            />
-            <Route
-              path="/learn"
-              element={
-                <Suspense fallback={<div className="app-content-loading"><Spinner /></div>}>
-                  <LearnNow />
-                </Suspense>
-              }
-            >
-              <Route path="intro" element={<LearnContent file="intro.md" />} />
-              <Route path="module1" element={<LearnContent file="module1.md" />} />
-              <Route path="module2" element={<LearnContent file="module2.md" />} />
-              <Route path="module3" element={<LearnContent file="module3.md" />} />
-            </Route>
-          </Routes>
+    <ConfigProvider
+      theme={{
+        token: {
+          colorPrimary: "#19c6c7",
+        },
+      }}
+    >
+      <AntdApp>
+        <Layout style={{ height: "100vh" }}>
+          <Navbar />
+          <Layout
+            className="app-layout"
+            style={{
+              backgroundColor,
+              height: "calc(100vh - 64px)",
+              marginTop: "64px",
+              overflow: "hidden",
+            }}
+          >
+            <Routes>
+              <Route
+                path="/"
+                element={
+                  <>
+                    <PlaygroundSidebar />
+                    <Content style={{ marginLeft: "64px" }}>
+                      {loading ? (
+                        <div className="app-content-loading">
+                          <Spinner />
+                        </div>
+                      ) : (
+                        <div className="app-main-content">
+                          <Suspense fallback={<div className="app-content-loading"><Spinner /></div>}>
+                            <MainContainer />
+                          </Suspense>
+                        </div>
+                      )}
+                    </Content>
+                  </>
+                }
+              />
+              <Route
+                path="/learn"
+                element={
+                  <Suspense fallback={<div className="app-content-loading"><Spinner /></div>}>
+                    <LearnNow />
+                  </Suspense>
+                }
+              >
+                <Route path="intro" element={<LearnContent file="intro.md" />} />
+                <Route path="module1" element={<LearnContent file="module1.md" />} />
+                <Route path="module2" element={<LearnContent file="module2.md" />} />
+                <Route path="module3" element={<LearnContent file="module3.md" />} />
+              </Route>
+            </Routes>
+          </Layout>
         </Layout>
-      </Layout>
-    </AntdApp>
+      </AntdApp>
+    </ConfigProvider>
   );
 };
 

src/components/Content.tsx

@@ -1,3 +1,17 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import { colors } from '../utils/theme';
 import React, { useEffect, useState } from "react";
 import ReactMarkdown from "react-markdown";
@@ -18,7 +32,7 @@ import {
   CopyOutlined,
   CheckOutlined,
 } from "@ant-design/icons";
-import { Spin, message, Button } from "antd";
+import { Spin, message, Button, theme } from "antd";
 import fetchContent from "../utils/fetchContent";
 import { steps } from "../constants/learningSteps/steps";
 import { LearnContentProps } from "../types/components/Content.types";
@@ -30,6 +44,7 @@ const LearnContent: React.FC<LearnContentProps> = ({ file }) => {
   const [error, setError] = useState<string | null>(null);
   const [copied, setCopied] = useState<string | null>(null);
   const navigate = useNavigate();
+  const { token } = theme.useToken();
 
   useEffect(() => {
     const loadContent = async () => {
@@ -101,26 +116,41 @@ const LearnContent: React.FC<LearnContentProps> = ({ file }) => {
 
   return (
     <ContentContainer>
-	  {currentIndex !== steps.length - 1 && (
-  		<div style={{ display: "flex", justifyContent: "flex-end", marginBottom: "12px" }}>
-    	  <Button
-			type="link"
-			onClick={handleExitLearning}
-			style={{
-    		  background: "transparent",
-			  border: "none",
-			  color: "#6b7280",
-			  cursor: "pointer",
-			  fontSize: "0.9rem",
-			  textDecoration: "underline",
-			  padding: 0,
-			  height: "auto"
-			}}
-		  >
-			Exit learning
-		  </Button>
-	    </div>
-	  )}
+      <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: "12px", gap: "10px" }}>
+        {steps[currentIndex]?.sampleName && (
+          <Button
+            type="primary"
+            onClick={() => navigate(`/?sample=${encodeURIComponent(steps[currentIndex].sampleName!)}`)}
+            style={{
+              backgroundColor: token.colorPrimary,
+              borderColor: token.colorPrimary,
+              fontSize: "0.9rem",
+              height: "auto",
+              padding: "4px 12px"
+            }}
+          >
+            Open in Playground
+          </Button>
+        )}
+        {currentIndex !== steps.length - 1 && (
+          <Button
+            type="link"
+            onClick={handleExitLearning}
+            style={{
+              background: "transparent",
+              border: "none",
+              color: "#6b7280",
+              cursor: "pointer",
+              fontSize: "0.9rem",
+              textDecoration: "underline",
+              padding: 0,
+              height: "auto"
+            }}
+          >
+            Exit learning
+          </Button>
+        )}
+      </div>
       {content && (
         <ReactMarkdown
           rehypePlugins={[rehypeRaw, rehypeHighlight]}
@@ -153,14 +183,14 @@ const LearnContent: React.FC<LearnContentProps> = ({ file }) => {
           <LeftOutlined /> Previous
         </NavigationButton>
         {currentIndex === steps.length - 1 ? (
-		  <NavigationButton onClick={handleExitLearning}>
-		  Finish
-		  </NavigationButton>
-		) : (
-		  <NavigationButton onClick={handleNext}>
-		  Next <RightOutlined />
-		  </NavigationButton>
-		)}
+          <NavigationButton onClick={handleExitLearning}>
+            Finish
+          </NavigationButton>
+        ) : (
+          <NavigationButton onClick={handleNext}>
+            Next <RightOutlined />
+          </NavigationButton>
+        )}
       </NavigationButtons>
     </ContentContainer>
   );

src/components/Navbar.tsx

@@ -208,7 +208,7 @@ function Navbar() {
     useAppStore,
     (state) => ({
       samples: state.samples,
-      loadSample: state.loadSample as (key: string) => Promise<void>,
+      loadSample: state.loadSample as (key: string) => Promise<boolean>,
       sampleName: state.sampleName,
     }),
     shallow

src/components/SampleDropdown.tsx

@@ -1,3 +1,17 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import { Button, Dropdown, Space, message, MenuProps } from "antd";
 import { DownOutlined } from "@ant-design/icons";
 import { useCallback, useMemo, useState } from "react";
@@ -14,7 +28,7 @@ function SampleDropdown({
     useAppStore,
     (state) => ({
       samples: state.samples,
-      loadSample: state.loadSample as (key: string) => Promise<void>,
+      loadSample: state.loadSample as (key: string) => Promise<boolean>,
     }),
     shallow
   );

src/constants/learningSteps/steps.ts

@@ -2,7 +2,7 @@
 
 export const steps = [
   { title: "Overview", link: "/learn/intro" },
-  { title: "Module 1", link: "/learn/module1" },
-  { title: "Module 2", link: "/learn/module2" },
-  { title: "Module 3", link: "/learn/module3" },
+  { title: "Module 1", link: "/learn/module1", sampleName: "Hello World" },
+  { title: "Module 2", link: "/learn/module2", sampleName: "Formula Now" },
+  { title: "Module 3", link: "/learn/module3", sampleName: "Join" },
 ];

src/store/store.ts

@@ -1,3 +1,17 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import { create } from "zustand";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
@@ -37,7 +51,7 @@ interface AppState {
   setEditorAgreementData: (value: string) => void;
   rebuild: () => Promise<void>;
   init: () => Promise<void>;
-  loadSample: (name: string) => Promise<void>;
+  loadSample: (name: string) => Promise<boolean>;
   generateShareableLink: () => string;
   loadFromLink: (compressedData: string) => Promise<void>;
   toggleDarkMode: () => void;
@@ -234,8 +248,14 @@ const useAppStore = create<AppState>()(
         init: async () => {
           const params = new URLSearchParams(window.location.search);
           const compressedData = params.get("data");
+          const sampleName = params.get("sample");
           if (compressedData) {
             await get().loadFromLink(compressedData);
+          } else if (sampleName) {
+            const success = await get().loadSample(sampleName);
+            if (!success) {
+              await get().rebuild();
+            }
           } else {
             await get().rebuild();
           }
@@ -255,7 +275,9 @@ const useAppStore = create<AppState>()(
               editorAgreementData: JSON.stringify(sample.DATA, null, 2),
             }));
             await get().rebuild();
+            return true;
           }
+          return false;
         },
         rebuild: async () => {
           const { templateMarkdown, modelCto, data } = get();