FEAT: Added tabs to easily navigate between description and solution

app/components/CodeEditor/CodeEditor.tsx

@@ -170,14 +170,14 @@ export default function CodeEditor({
   chapterIndex: number;
   outputResult: OutputResult;
 }) {
-  const { colorMode } = useColorMode();
-  const [monaco, setMonaco] = useState<any>(null);
-  const [isValidating, setIsValidating] = useState(false);
-  const editorStore = useEditorStore();
-  const editorRef = useRef<any>(null);
-
-  // Apply custom hooks
-  useEditorTheme(monaco, colorMode);
+    const { colorMode } = useColorMode();
+    const [monaco, setMonaco] = useState<any>(null);
+    const [isValidating, setIsValidating] = useState(false);
+    const editorStore = useEditorStore();
+    const editorRef = useRef<any>(null);
+
+    // Apply custom hooks
+    useEditorTheme(monaco, colorMode);
 
   const handleValidate = () => {
     setIsValidating(true);

app/components/ContentViewer/ContentViewer.module.css

@@ -7,6 +7,7 @@
   padding-right: 14px;
   padding-bottom: 12px;
   padding-left: 14px;
+  margin-top: 50px;
 }
 .contentWrapper {
   border-right: 1px solid hsl(var(--border-color));

app/components/EditorNOutput/EditorNOutput.tsx

@@ -7,6 +7,7 @@ import { Box } from "@chakra-ui/react";
 import Output from "../Output";
 import { CodeFile } from "@/lib/types";
 import { outputReducer } from "@/lib/reducers";
+import { useUserSolutionStore } from "@/lib/stores";
 
 export default function EditorNOutput({
   codeFile,
@@ -19,9 +20,7 @@ export default function EditorNOutput({
   stepIndex: number;
   chapterIndex: number;
 }) {
-  const [codeString, setCodeString] = useState(
-    JSON.stringify(codeFile.code, null, 2),
-  );
+  const { setCodeString, codeString } = useUserSolutionStore();
 
   const showSolution = () => {
     setCodeString(JSON.stringify(codeFile.solution, null, 2));
@@ -64,6 +63,9 @@ export default function EditorNOutput({
   };
 
   useEffect(() => {
+    // Load the initial code
+    setCodeString(JSON.stringify(codeFile.code, null, 2));
+
     const topHeight = localStorage.getItem("verticalTopHeight");
     if (topHeight) {
       setTopWidth(Number(topHeight));

app/components/MyBtn/MyBtn.tsx

@@ -8,13 +8,15 @@ export default function MyBtn({
   isDisabled,
   tooltip,
   size = "xs",
+  position = "right",
 }: {
   children: React.ReactNode;
   variant: "success" | "error" | "default";
   onClick: () => void;
   isDisabled?: boolean;
   tooltip?: string;
   size?: "xs" | "sm" | "md" | "lg";
+  position?: "left" | "right";
 }) {
   return (
     <Tooltip label={tooltip} aria-label={tooltip} placement="top">
@@ -31,6 +33,7 @@ export default function MyBtn({
         textTransform={"uppercase"}
         isDisabled={isDisabled}
         fontWeight={"bold"}
+        style={{float: position}}
       >
         {children}
       </Button>

app/components/SolutionTab/SolutionTab.module.css

@@ -0,0 +1,10 @@
+.container {
+  height: 70vh;
+  width: 100%;
+  border: 1px solid #ccc;
+  margin-bottom: 16px;
+  padding: 16px 10px;
+  box-sizing: border-box;
+
+}
+

app/components/SolutionTab/SolutionTab.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import Editor, { Monaco } from "@monaco-editor/react";
+import { useColorMode } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import { useUserSolutionStore } from "@/lib/stores";
+import styles from "./SolutionTab.module.css";
+import MyBtn from "../MyBtn/MyBtn";
+
+type SolutionTabProps = {
+  solution: string;
+};
+
+const useEditorTheme = (monaco: Monaco, colorMode: "dark" | "light") => {
+  useEffect(() => {
+    if (monaco) {
+      monaco.editor.defineTheme("my-theme", {
+        base: "vs-dark",
+        inherit: true,
+        rules: [],
+        colors: {
+          "editor.background": "#1f1f1f",
+        },
+      });
+      monaco.editor.setTheme(colorMode === "light" ? "light" : "my-theme");
+    }
+  }, [monaco, colorMode]);
+};
+
+const SolutionTab = ({ solution }: SolutionTabProps) => {
+  const { colorMode } = useColorMode();
+  const [monaco, setMonaco] = useState<any>(null);
+
+  const { setCodeString } = useUserSolutionStore();
+
+  function useSolution() {
+    setCodeString(solution);
+  }
+
+  // Apply custom hooks
+  useEditorTheme(monaco, colorMode);
+  return (
+    <div className={styles.container}>
+      <Editor
+        language="json"
+        theme={colorMode === "light" ? "light" : "my-theme"}
+        value={String(solution)}
+        height="90%"
+        options={{
+          minimap: { enabled: false },
+          fontSize: 14,
+        }}
+        // dont allow to edit the solution
+        onMount={(editor, monacoInstance) => {
+          setMonaco(monacoInstance);
+          editor.updateOptions({ readOnly: true });
+        }}
+      />
+      <MyBtn onClick={useSolution} variant={"default"} size="sm" position="right">
+        Use this solution
+      </MyBtn>
+    </div>
+  );
+};
+
+export default SolutionTab;

app/components/SolutionTab/index.tsx

@@ -0,0 +1 @@
+export { default as default } from "./SolutionTab";

app/components/TabHeader/TabHeader.module.css

@@ -0,0 +1,40 @@
+.wrapper {
+  width: 100%;
+  padding: 12px 16px;
+  position: fixed;
+  top: 40px;
+  margin: 12px 0;
+}
+
+.tabContainer {
+  display: flex;
+  gap: 1.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  position: relative;
+  color: hsl(var(--text));
+}
+
+.tabButton {
+  position: relative;
+  padding-bottom: 8px;
+  background: none;
+  font-size: 16px;
+  border: none;
+  cursor: pointer;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+  color: hsl(var(--text));
+}
+
+.activeTab {
+    color: hsl(var(--text));
+}
+
+.underline {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color:hsl(var(--text));
+}

app/components/TabHeader/TabHeader.tsx

@@ -0,0 +1,48 @@
+"use client";
+import styles from "./TabHeader.module.css";
+
+type TabHeaderProps = {
+  currentSelectedTab: "description" | "solution";
+  setCurrentSelectedTab: (tab: "description" | "solution") => void;
+};
+
+const TabHeader = ({
+  currentSelectedTab,
+  setCurrentSelectedTab,
+}: TabHeaderProps & {
+  currentSelectedTab: "description" | "solution";
+  setCurrentSelectedTab: (tab: "description" | "solution") => void;
+}) => {
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.tabContainer}>
+        <button
+          onClick={() => setCurrentSelectedTab("description")}
+          className={`${styles.tabButton} ${
+            currentSelectedTab === "description" ? styles.activeTab : ""
+          }`}
+        >
+          Description
+          {currentSelectedTab === "description" && (
+            <div className={styles.underline} />
+          )}
+        </button>
+
+        <button
+          onClick={() => setCurrentSelectedTab("solution")}
+          className={`${styles.tabButton} ${
+            currentSelectedTab === "solution" ? styles.activeTab : ""
+          }`}
+        >
+          Solution
+          {currentSelectedTab === "solution" && (
+            <div className={styles.underline} />
+          )}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default TabHeader;

app/components/TabHeader/index.tsx

@@ -0,0 +1 @@
+export { default as default } from "./TabHeader";

app/components/Tabs/Tabs.module.css

@@ -0,0 +1,4 @@
+.container {
+  height: 100%;
+  width: 100%;
+}

app/components/Tabs/Tabs.tsx

@@ -0,0 +1,31 @@
+"use client";
+import ContentViewer from "../ContentViewer/ContentViewer";
+import { ReactElement, useState } from "react";
+import SolutionTab from "../SolutionTab/SolutionTab";
+import TabHeader from "../TabHeader/TabHeader";
+import { TabType } from "@/lib/types";
+import styles from "./Tabs.module.css";
+
+type ContentTabProps = {
+  Page?: ReactElement;
+  solution: string  
+};
+
+function Tabs({ Page,solution}: ContentTabProps) {
+  const [currentSelectedTab,setCurrentSelectedTab] = useState<TabType>("description");
+  return (
+    <div className={styles.container}>
+        <TabHeader  currentSelectedTab={currentSelectedTab} setCurrentSelectedTab={setCurrentSelectedTab} />
+
+    <ContentViewer> 
+      {
+        currentSelectedTab=="description"?
+        Page:
+        <SolutionTab solution={solution}/>
+      }
+    </ContentViewer>
+      </div>
+  );
+}
+
+export default Tabs;

app/components/Tabs/index.tsx

@@ -0,0 +1 @@
+export { default as default } from "./Tabs";

app/content/[...markdownPath]/page.module.css

@@ -5,3 +5,9 @@
   height: 100%;
   overflow-y: auto;
 }
+.tabContainer {
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  position: relative;
+}

app/content/[...markdownPath]/page.tsx

@@ -2,8 +2,8 @@ import { contentManager } from "@/lib/contentManager";
 import styles from "./page.module.css";
 import React from "react";
 import { parseLessonFolder } from "@/lib/server-functions";
-import ContentViewer from "@/app/components/ContentViewer";
 import EditorNOutput from "@/app/components/EditorNOutput";
+import Tabs from "@/app/components/Tabs/Tabs";
 
 export function generateMetadata({
   params,
@@ -37,12 +37,14 @@ export default async function Content({
   const { mdPath, nextStepPath, stepIndex, codePath, chapterIndex } =
     contentManager.getPageMeta(urlPath);
   const { Page, metadata, codeFile } = parseLessonFolder(mdPath, codePath);
-
   return (
     <div className={styles.mainArea}>
-      <ContentViewer>
-        <Page />
-      </ContentViewer>
+      <div className={styles.tabContainer}>
+        <Tabs
+          Page={<Page />}
+          solution={JSON.stringify(codeFile.solution, null, 2)}
+        />
+      </div>
       <EditorNOutput
         codeFile={codeFile}
         nextStepPath={nextStepPath}

lib/stores.ts

@@ -1,4 +1,5 @@
 import { create } from "zustand";
+import { TabType } from "./types";
 
 type Store = {
   editor: any;
@@ -30,6 +31,8 @@ type UserSolutionStore = {
     lesson: number,
   ) => string | null;
   clearAllCode: () => void;
+  codeString: string;
+  setCodeString: (code: string) => void;
 };
 
 export const useUserSolutionStore = create<UserSolutionStore>()((set, get) => ({
@@ -66,4 +69,9 @@ export const useUserSolutionStore = create<UserSolutionStore>()((set, get) => ({
     localStorage.removeItem("codeData");
     set({ userSolutionsByLesson: {} });
   },
+
+  codeString: "",
+  setCodeString: (code: string) => {
+    set({ codeString: code });
+  },
 }));

lib/types.ts

@@ -1,5 +1,7 @@
 import { InvalidSchemaError } from "@hyperjump/json-schema/draft-2020-12";
 
+export type TabType = "description" | "solution";
+
 export type ChapterStep = {
   title: string;
   fileName: string;
@@ -59,4 +61,5 @@ export type OutputResult = {
   testCaseResults?: TestCaseResult[];
   totalTestCases?: number;
   errors?: InvalidSchemaError | string;
+  selectedTab?: TabType;
 };