diff --git a/src/app/(dashboard)/dashboard/(task)/task/[...taskId]/page.tsx b/src/app/(dashboard)/dashboard/(task)/task/[...taskId]/page.tsx
index 9967395..11708c0 100644
--- a/src/app/(dashboard)/dashboard/(task)/task/[...taskId]/page.tsx
+++ b/src/app/(dashboard)/dashboard/(task)/task/[...taskId]/page.tsx
@@ -1,4 +1,3 @@
-import React from "react";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
ResizableHandle,
@@ -8,16 +7,21 @@ import {
import markdownStyles from "@/styles/markdown-styles.module.css";
import { tutorialData } from "@/constants/tutorial-data";
import { notFound } from "next/navigation";
-import { buttonVariants } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
import Link from "next/link";
import { cn } from "@/lib/utils";
import EditorWindow from "@/components/task/editor-window";
import { LANGUAGE_VERSIONS } from "@/constants/language-options";
import { markdownToHtml } from "@/lib/markdown-to-html";
+import TaskPage from "@/components/task-page";
const languages = Object.keys(LANGUAGE_VERSIONS);
const Page = async ({ params }: { params: { taskId: string[] } }) => {
+ // const [activeMobileView, setActiveMobileView] = useState<
+ // "tutorial" | "code" | "output"
+ // >("tutorial");
+
if (!params.taskId[0] || !languages.includes(params.taskId[0])) {
notFound();
}
@@ -41,113 +45,13 @@ const Page = async ({ params }: { params: { taskId: string[] } }) => {
const content = await markdownToHtml(tutorial?.content || "");
return (
<>
-
-
-
-
-
-
-
-
- {langTutorial?.tutorial[tutorialIndex - 1] && (
-
- Prev
-
- )}
-
-
-
- {langTutorial?.tutorial[tutorialIndex + 1] && (
-
- Next
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {langTutorial?.tutorial[tutorialIndex - 1] && (
-
- Prev
-
- )}
-
-
-
- {langTutorial?.tutorial[tutorialIndex + 1] && (
-
- Next
-
- )}
-
-
-
-
-
-
-
-
-
-
-
+
>
);
};
diff --git a/src/components/layout/mobile-sidebar.tsx b/src/components/layout/mobile-sidebar.tsx
index 23a263c..b98d919 100644
--- a/src/components/layout/mobile-sidebar.tsx
+++ b/src/components/layout/mobile-sidebar.tsx
@@ -16,7 +16,7 @@ export function MobileSidebar({ className }: SidebarProps) {
return (
<>
-
+
diff --git a/src/components/task-page.tsx b/src/components/task-page.tsx
new file mode 100644
index 0000000..8cb8954
--- /dev/null
+++ b/src/components/task-page.tsx
@@ -0,0 +1,315 @@
+"use client";
+
+import React, { useState } from "react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+ ResizableHandle,
+ ResizablePanel,
+ ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import markdownStyles from "@/styles/markdown-styles.module.css";
+import { tutorialData } from "@/constants/tutorial-data";
+import { notFound } from "next/navigation";
+import { Button, buttonVariants } from "@/components/ui/button";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+import EditorWindow from "@/components/task/editor-window";
+import { LANGUAGE_VERSIONS } from "@/constants/language-options";
+import { markdownToHtml } from "@/lib/markdown-to-html";
+import Header from "./task/header";
+import Image from "next/image";
+import ThemeToggle from "./layout/ThemeToggle/theme-toggle";
+
+const languages = Object.keys(LANGUAGE_VERSIONS);
+
+interface LangTutorial {
+ id: number;
+ language: string;
+ tutorial: {
+ id: number;
+ content: string;
+ code: string;
+ }[];
+}
+
+interface Tutorial {
+ id: number;
+ content: string;
+ code: string;
+}
+
+const TaskPage = ({
+ params,
+ langTutorial,
+ tutorial,
+ tutorialIndex,
+ content,
+}: {
+ params: { taskId: string[] };
+ langTutorial: LangTutorial;
+ tutorial: Tutorial;
+ tutorialIndex: number;
+ content: string;
+}) => {
+ const [activeMobileView, setActiveMobileView] = useState<
+ "tutorial" | "code" | "output"
+ >("tutorial");
+
+ // if (!params.taskId[0] || !languages.includes(params.taskId[0])) {
+ // notFound();
+ // }
+
+ // const langTutorial = tutorialData.find(
+ // (t) => t.language === params.taskId[0],
+ // )!;
+
+ // const tutorial = langTutorial.tutorial.find(
+ // (t) => t.id === (Number(params.taskId[1]) || 1),
+ // );
+
+ // const tutorialIndex = langTutorial.tutorial.findIndex(
+ // (t) => t.id === (Number(params.taskId[1]) || 1),
+ // );
+
+ // if (!tutorial || tutorialIndex === -1) {
+ // notFound();
+ // }
+
+ // const content = await markdownToHtml(tutorial?.content || "");
+ return (
+ <>
+
+
+
+
+
+
+ {/*
*/}
+ {/* */}
+
+
+
+
+
+
+
+
+
+
+ {langTutorial?.tutorial[tutorialIndex - 1] && (
+
+ Prev
+
+ )}
+
+
+
+ {langTutorial?.tutorial[tutorialIndex + 1] && (
+
+ Next
+
+ )}
+
+
+
+
+
+ {/* */}
+ {/* */}
+ {/* */}
+
+ {/* */}
+ {/* */}
+
+ {/*
+
+
+
+
+
+
+
+ {langTutorial?.tutorial[tutorialIndex - 1] && (
+
+ Prev
+
+ )}
+
+
+
+ {langTutorial?.tutorial[tutorialIndex + 1] && (
+
+ Next
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
*/}
+
+
+
+
+
+
+
+
+
+ {langTutorial?.tutorial[tutorialIndex - 1] && (
+
+ Prev
+
+ )}
+
+
+
+ {langTutorial?.tutorial[tutorialIndex + 1] && (
+
+ Next
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ >
+ );
+};
+
+export default TaskPage;
diff --git a/src/components/task/editor-window.tsx b/src/components/task/editor-window.tsx
index 6b413a5..0649f55 100644
--- a/src/components/task/editor-window.tsx
+++ b/src/components/task/editor-window.tsx
@@ -19,13 +19,14 @@ import { notFound, useRouter } from "next/navigation";
import { defineTheme } from "@/utils/define-theme";
import Preview from "./preview";
import { MyComponents } from "./my-components";
-
-
+import { cn } from "@/lib/utils";
export default function EditorWindow({
+ activeMobileView: activeMobileView,
language: lang,
step,
}: {
+ activeMobileView: "tutorial" | "code" | "output";
language: string;
step: number;
}) {
@@ -51,17 +52,17 @@ export default function EditorWindow({
};
useEffect(() => {
- defineTheme("oceanic-next").then((_) => setTheme("oceanic-next"));
+ defineTheme("cobalt").then((_) => setTheme("cobalt"));
}, []);
- function handleThemeChange(th: any) {
- const theme = th;
+ function handleThemeChange(th: string) {
+ const themee = th;
// console.log("theme...", theme);
- if (["light", "vs-dark"].includes(theme)) {
- setTheme(theme);
+ if (["light", "vs-dark"].includes(themee)) {
+ setTheme(themee);
} else {
- defineTheme(theme).then((_) => setTheme(theme));
+ defineTheme(themee).then((_) => setTheme(themee));
}
}
@@ -95,20 +96,33 @@ export default function EditorWindow({
// console.log(tutorial);
return (
-
-
-
+ <>
+
+ {/*
+ */}
+
-
+ /> */}
-
-
-
-
+ {/* */}
+ {/*
*/}
+ {/*
*/}
-
+
{lang === "react" ? (
-
-
+ {/* */}
+ {/* */}
+
+
+
+
+
+
+
+
+
+
+
+ {lang === "react" ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+ >
);
}
-
-
diff --git a/src/components/task/header.tsx b/src/components/task/header.tsx
index 99dd110..aac5835 100644
--- a/src/components/task/header.tsx
+++ b/src/components/task/header.tsx
@@ -5,7 +5,7 @@ import React from "react";
const Header = () => {
return (
-