feat: task
This commit is contained in:
mehedi-hasan
parent
f7ad1ac2ab
commit
ca0e7f71b3
|
|
@ -0,0 +1,19 @@
|
|||
import { Metadata } from "next";
|
||||
import React from "react";
|
||||
import Header from "@/components/task/header";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Task | Skilled Ai",
|
||||
description: "Skilled Ai",
|
||||
};
|
||||
|
||||
const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
<div className="grid grid-rows-[53px_1fr] min-h-screen">
|
||||
<Header/>
|
||||
<main className="">{children}</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
import React from "react";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from "@/components/ui/resizable";
|
||||
import { unified } from "unified";
|
||||
import remarkParse from "remark-parse";
|
||||
import remarkRehype from "remark-rehype";
|
||||
import rehypeStringify from "rehype-stringify";
|
||||
import rehypePrettyCode from "rehype-pretty-code";
|
||||
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 Link from "next/link";
|
||||
import { cn } from "@/lib/utils";
|
||||
import EditorWindow from "@/components/task/editor-window";
|
||||
import { LANGUAGE_VERSIONS } from "@/constants/language-options";
|
||||
|
||||
async function main(tutorialCode: string) {
|
||||
const file = await unified()
|
||||
.use(remarkParse)
|
||||
.use(remarkRehype)
|
||||
.use(rehypePrettyCode, {})
|
||||
.use(rehypeStringify)
|
||||
.process(tutorialCode);
|
||||
|
||||
return file;
|
||||
}
|
||||
|
||||
const languages = Object.keys(LANGUAGE_VERSIONS);
|
||||
|
||||
const Page = async ({ params }: { params: { taskId: string[] } }) => {
|
||||
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 code = await main(tutorial?.content || "");
|
||||
return (
|
||||
<>
|
||||
<div className="md:hidden w-full h-full">
|
||||
<ResizablePanelGroup
|
||||
direction="vertical"
|
||||
className="max-w-[1440px] mx-auto h-full"
|
||||
>
|
||||
<ResizablePanel defaultSize={50}>
|
||||
<ScrollArea className="h-[calc(100vh-55px)] border-b">
|
||||
<div className="px-4 py-6 flex flex-col gap-4 h-full mb-[50vh]">
|
||||
<div
|
||||
className={cn("grow", markdownStyles["markdown"])}
|
||||
dangerouslySetInnerHTML={{ __html: String(code) }}
|
||||
></div>
|
||||
<div className="flex justify-between">
|
||||
<div className="mb-6">
|
||||
{langTutorial?.tutorial[tutorialIndex - 1] && (
|
||||
<Link
|
||||
href={`/dashboard/task/${params.taskId[0]}/${
|
||||
Number(params.taskId[1]) - 1
|
||||
}`}
|
||||
className={buttonVariants({
|
||||
variant: "outline",
|
||||
})}
|
||||
>
|
||||
Prev
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
{langTutorial?.tutorial[tutorialIndex + 1] && (
|
||||
<Link
|
||||
href={`/dashboard/task/${params.taskId[0]}/${
|
||||
Number(params.taskId[1]) + 1
|
||||
}`}
|
||||
className={buttonVariants({ variant: "outline" })}
|
||||
>
|
||||
Next
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle withHandle />
|
||||
<ResizablePanel defaultSize={50}>
|
||||
<EditorWindow
|
||||
language={params.taskId[0]}
|
||||
step={Number(params.taskId[1]) || 1}
|
||||
/>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
<div className="hidden md:block w-full h-full">
|
||||
<ResizablePanelGroup
|
||||
direction="horizontal"
|
||||
className="max-w-[1440px] mx-auto h-full"
|
||||
>
|
||||
<ResizablePanel defaultSize={50}>
|
||||
<ScrollArea className="h-[calc(100vh-55px)]">
|
||||
<div className="px-4 py-6 flex flex-col gap-4 h-full">
|
||||
<div
|
||||
className={cn("grow", markdownStyles["markdown"])}
|
||||
dangerouslySetInnerHTML={{ __html: String(code) }}
|
||||
></div>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<div className="mb-6">
|
||||
{langTutorial?.tutorial[tutorialIndex - 1] && (
|
||||
<Link
|
||||
href={`/dashboard/task/${params.taskId[0]}/${
|
||||
Number(params.taskId[1]) - 1
|
||||
}`}
|
||||
className={buttonVariants({
|
||||
variant: "outline",
|
||||
})}
|
||||
>
|
||||
Prev
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
{langTutorial?.tutorial[tutorialIndex + 1] && (
|
||||
<Link
|
||||
href={`/dashboard/task/${params.taskId[0]}/${
|
||||
Number(params.taskId[1]) + 1
|
||||
}`}
|
||||
className={buttonVariants({ variant: "outline" })}
|
||||
>
|
||||
Next
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle withHandle />
|
||||
<ResizablePanel defaultSize={50}>
|
||||
<EditorWindow
|
||||
language={params.taskId[0]}
|
||||
step={Number(params.taskId[1]) || 1}
|
||||
/>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page;
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
import React, { useCallback } from "react";
|
||||
import Editor from "@monaco-editor/react";
|
||||
|
||||
const activateMonacoJSXHighlighter = async (monacoEditor: any, monaco: any) => {
|
||||
// monaco-jsx-highlighter depends on these in addition to Monaco and an instance of a Monaco Editor.
|
||||
const { default: traverse } = await import("@babel/traverse");
|
||||
const { parse } = await import("@babel/parser");
|
||||
// >>> The star of the show =P >>>
|
||||
const {
|
||||
default: MonacoJSXHighlighter,
|
||||
JSXTypes,
|
||||
makeBabelParse, //By @HaimCandiTech
|
||||
} = await import(
|
||||
// @ts-ignore
|
||||
"monaco-jsx-highlighter" // Note: there is a polyfilled version alongside the regular version.
|
||||
); // For example, starting with 2.0.2, 2.0.2-polyfilled is also available.
|
||||
|
||||
const parseJSX = makeBabelParse(parse, true); // param0:Babel's parse, param1: default config for JSX syntax (false), TSX (true).
|
||||
// Instantiate the highlighter
|
||||
const monacoJSXHighlighter = new MonacoJSXHighlighter(
|
||||
monaco, // references Range and other APIs
|
||||
parseJSX, // obtains an AST, internally passes to parse options: {...options, sourceType: "module",plugins: ["jsx"],errorRecovery: true}
|
||||
traverse, // helps collecting the JSX expressions within the AST
|
||||
monacoEditor, // highlights the content of that editor via decorations
|
||||
);
|
||||
// Start the JSX highlighting and get the dispose function
|
||||
let disposeJSXHighlighting =
|
||||
monacoJSXHighlighter.highlightOnDidChangeModelContent();
|
||||
// Enhance monaco's editor.action.commentLine with JSX commenting and get its disposer
|
||||
let disposeJSXCommenting = monacoJSXHighlighter.addJSXCommentCommand();
|
||||
// <<< You are all set. >>>
|
||||
|
||||
// Optional: customize the color font in JSX texts (style class JSXElement.JSXText.tastyPizza from ./index.css)
|
||||
JSXTypes.JSXText.options.inlineClassName = "JSXElement.JSXText.tastyPizza";
|
||||
// more details here: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IModelDecorationOptions.html
|
||||
// console.log(
|
||||
// "Customize each JSX expression type's options, they must match monaco.editor.IModelDecorationOptions:",
|
||||
// JSXTypes,
|
||||
// );
|
||||
|
||||
// This example's shorthands for toggling actions
|
||||
const toggleJSXHighlighting = () => {
|
||||
if (disposeJSXHighlighting) {
|
||||
disposeJSXHighlighting();
|
||||
disposeJSXHighlighting = null;
|
||||
return false;
|
||||
}
|
||||
|
||||
disposeJSXHighlighting =
|
||||
monacoJSXHighlighter.highlightOnDidChangeModelContent();
|
||||
return true;
|
||||
};
|
||||
|
||||
const toggleJSXCommenting = () => {
|
||||
if (disposeJSXCommenting) {
|
||||
disposeJSXCommenting();
|
||||
disposeJSXCommenting = null;
|
||||
return false;
|
||||
}
|
||||
|
||||
disposeJSXCommenting = monacoJSXHighlighter.addJSXCommentCommand();
|
||||
return true;
|
||||
};
|
||||
|
||||
const isToggleJSXHighlightingOn = () => !!disposeJSXHighlighting;
|
||||
const isToggleJSXCommentingOn = () => !!disposeJSXCommenting;
|
||||
|
||||
return {
|
||||
monacoJSXHighlighter,
|
||||
toggleJSXHighlighting,
|
||||
toggleJSXCommenting,
|
||||
isToggleJSXHighlightingOn,
|
||||
isToggleJSXCommentingOn,
|
||||
};
|
||||
};
|
||||
|
||||
type CodeEditorProps = {
|
||||
// code: string;
|
||||
defaultCode?: string;
|
||||
onChange: (value: string | undefined) => void;
|
||||
theme: string;
|
||||
language: string;
|
||||
codeValue: string;
|
||||
};
|
||||
export function CodeEditor({
|
||||
defaultCode,
|
||||
onChange,
|
||||
theme,
|
||||
language,
|
||||
codeValue,
|
||||
}: CodeEditorProps) {
|
||||
// const [value, setValue] = useState("");
|
||||
|
||||
const handleEditorDidMount = useCallback((monacoEditor: any, monaco: any) => {
|
||||
// monacoEditor.updateOptions({ wordWrap: "on" });
|
||||
activateMonacoJSXHighlighter(monacoEditor, monaco)
|
||||
.then((monacoJSXHighlighterRefCurrent) => {
|
||||
// monacoJSXHighlighterRef.current = monacoJSXHighlighterRefCurrent;
|
||||
// setIsEditorReady(!!monacoEditor);
|
||||
// setIsJSXHighlightingOn(
|
||||
// monacoJSXHighlighterRefCurrent.isToggleJSXHighlightingOn()
|
||||
// );
|
||||
// setIsJSXCommentingOn(
|
||||
// monacoJSXHighlighterRefCurrent.isToggleJSXCommentingOn()
|
||||
// );
|
||||
})
|
||||
.catch((e) => {
|
||||
// console.log(e)
|
||||
});
|
||||
}, []);
|
||||
|
||||
// const handleEditorChange = (value: string | undefined) => {
|
||||
// setValue(value || "");
|
||||
// onChange(value || "");
|
||||
// };
|
||||
|
||||
return (
|
||||
<Editor
|
||||
// height="50vh" // By default, it fully fits with its parent
|
||||
options={{
|
||||
minimap: {
|
||||
enabled: false,
|
||||
},
|
||||
wordWrap: "on"
|
||||
}}
|
||||
theme={theme}
|
||||
language={language === "react" ? "javascript" : language}
|
||||
value={codeValue}
|
||||
defaultValue={defaultCode}
|
||||
onMount={handleEditorDidMount}
|
||||
onChange={onChange}
|
||||
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
//@ts-ignore
|
||||
import { transform } from "@babel/standalone";
|
||||
|
||||
const compile = (input: string) =>
|
||||
transform(input, {
|
||||
filename: "random.tsx",
|
||||
presets: ["react", "es2017"]
|
||||
})?.code;
|
||||
|
||||
export const compileCode = (code: string) => {
|
||||
// try {
|
||||
|
||||
|
||||
const compiled = compile(
|
||||
code.replace(
|
||||
"import * as React from 'react'; //don't change this line\n",
|
||||
""
|
||||
)
|
||||
)?.replace('"use strict";\n', "");
|
||||
|
||||
//@ts-ignore
|
||||
return new Function("React", "", `return ${compiled};`);
|
||||
// } catch (error) {
|
||||
// console.log(error)
|
||||
// // return new Function("React", "", `return <div></div>;`);
|
||||
// }
|
||||
};
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { compileCode } from "./compiler";
|
||||
import { v4 as uuid } from "uuid";
|
||||
import { CodeEditor } from "./code-editor";
|
||||
import { ErrorBoundary } from "react-error-boundary";
|
||||
import PreviewErrorFallback from "./preview-error-fallback";
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from "@/components/ui/resizable";
|
||||
import { ThemeDropdown } from "./theme-dropdown";
|
||||
import LanguagesDropdown from "./languages-dropdown";
|
||||
import Output from "./output";
|
||||
import { tutorialData } from "@/constants/tutorial-data";
|
||||
import { notFound, useRouter } from "next/navigation";
|
||||
import { defineTheme } from "@/utils/define-theme";
|
||||
import Preview from "./preview";
|
||||
import { MyComponents } from "./my-components";
|
||||
|
||||
|
||||
|
||||
export default function EditorWindow({
|
||||
language: lang,
|
||||
step,
|
||||
}: {
|
||||
language: string;
|
||||
step: number;
|
||||
}) {
|
||||
const [componentName, setComponentName] = useState<any>("");
|
||||
const [theme, setTheme] = useState("cobalt");
|
||||
// const [language, setLanguage] = useState(languageOptions[0]);
|
||||
// const [language, setLanguage] = useState("react");
|
||||
// const [defaultCode, setDefaultCode] = useState("");
|
||||
const [codeValue, setCodeValue] = useState("");
|
||||
const router = useRouter();
|
||||
|
||||
const handleCodeChange = (code: string | undefined) => {
|
||||
try {
|
||||
setCodeValue(code || "");
|
||||
const func = compileCode(code || "");
|
||||
const id = uuid();
|
||||
MyComponents[id] = func(React);
|
||||
setComponentName(id);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
// setComponentName("error");
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
defineTheme("oceanic-next").then((_) => setTheme("oceanic-next"));
|
||||
}, []);
|
||||
|
||||
function handleThemeChange(th: any) {
|
||||
const theme = th;
|
||||
// console.log("theme...", theme);
|
||||
|
||||
if (["light", "vs-dark"].includes(theme)) {
|
||||
setTheme(theme);
|
||||
} else {
|
||||
defineTheme(theme).then((_) => setTheme(theme));
|
||||
}
|
||||
}
|
||||
|
||||
const handleLanguageChange = (lang: string) => {
|
||||
router.push(`/dashboard/task/${lang}/1`);
|
||||
// try {
|
||||
// if (lang === "react") {
|
||||
// const func = compileCode(CODE_SNIPPETS[lang]);
|
||||
// const id = uuid();
|
||||
// MyComponents[id] = func(React);
|
||||
// setComponentName(id);
|
||||
// }
|
||||
|
||||
// setLanguage(lang);
|
||||
// // @ts-ignore
|
||||
// setCodeValue(CODE_SNIPPETS[lang]);
|
||||
// // @ts-ignore
|
||||
// // setDefaultCode(CODE_SNIPPETS[language]);
|
||||
// } catch (error) {
|
||||
// // console.log(error);
|
||||
// }
|
||||
};
|
||||
|
||||
const tutorial = tutorialData
|
||||
.find((t) => t.language === lang)
|
||||
?.tutorial.find((t) => t.id === step);
|
||||
|
||||
if (!tutorial) {
|
||||
notFound();
|
||||
}
|
||||
// console.log(tutorial);
|
||||
|
||||
return (
|
||||
<ResizablePanelGroup direction="vertical" className="border-r">
|
||||
<ResizablePanel defaultSize={50}>
|
||||
<div className="h-full ">
|
||||
<div className="p-2 flex gap-4">
|
||||
<ThemeDropdown
|
||||
handleThemeChange={handleThemeChange}
|
||||
theme={theme}
|
||||
/>
|
||||
<LanguagesDropdown
|
||||
handleLanguageChange={handleLanguageChange}
|
||||
language={lang}
|
||||
/>
|
||||
</div>
|
||||
<div className="h-full">
|
||||
<CodeEditor
|
||||
codeValue={codeValue}
|
||||
// @ts-ignore
|
||||
// defaultCode={CODE_SNIPPETS[language]}
|
||||
defaultCode={tutorial?.code || ""}
|
||||
onChange={handleCodeChange}
|
||||
theme={theme}
|
||||
// language={language}
|
||||
language={lang}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle withHandle />
|
||||
<ResizablePanel defaultSize={50}>
|
||||
<ErrorBoundary FallbackComponent={PreviewErrorFallback}>
|
||||
<div className="bg-white text-black h-full p-4">
|
||||
{lang === "react" ? (
|
||||
<Preview
|
||||
componentName={componentName}
|
||||
tutorialCode={tutorial?.code || ""}
|
||||
/>
|
||||
) : (
|
||||
<Output
|
||||
// @ts-ignore
|
||||
codeValue={codeValue || tutorial?.code || ""}
|
||||
// codeValue={codeValue || CODE_SNIPPETS[language]}
|
||||
// language={language}
|
||||
language={lang}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</ErrorBoundary>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import ThemeToggle from "@/components/layout/ThemeToggle/theme-toggle";
|
||||
import Link from "next/link";
|
||||
import React from "react";
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header className="border-b px-4 h-min">
|
||||
<nav className="flex justify-between items-center max-w-[1440px] mx-auto py-2">
|
||||
<Link href="/">
|
||||
<h2>Skilled Ai</h2>
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-8">
|
||||
{/* <Link href="/">Home</Link> */}
|
||||
<Link href="/dashboard">Dashboard</Link>
|
||||
{/* <Link href="/login">Login</Link> */}
|
||||
<ThemeToggle/>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
import React from "react";
|
||||
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { LANGUAGE_VERSIONS } from "@/constants/language-options";
|
||||
// import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
// import Link from "next/link";
|
||||
|
||||
const languages = Object.entries(LANGUAGE_VERSIONS);
|
||||
|
||||
const LanguagesDropdown = ({ handleLanguageChange, language }: any) => {
|
||||
return (
|
||||
<Select onValueChange={handleLanguageChange} value={language}>
|
||||
<SelectTrigger className="w-[150px]">
|
||||
<SelectValue placeholder="Select Language" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{/* <ScrollArea className="h-96"> */}
|
||||
<SelectGroup>
|
||||
<SelectLabel>Languages</SelectLabel>
|
||||
{languages.map(([lang, version]) => (
|
||||
// <Link href={`/dashboard/task/${lang}`} key={lang}>
|
||||
<SelectItem className="cursor-pointer" value={lang} key={lang}>
|
||||
{lang} {version}
|
||||
</SelectItem>
|
||||
// </Link>
|
||||
))}
|
||||
</SelectGroup>
|
||||
{/* </ScrollArea> */}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
);
|
||||
};
|
||||
|
||||
export default LanguagesDropdown;
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import React from "react";
|
||||
import { compileCode } from "./compiler";
|
||||
import { CODE_SNIPPETS } from "@/constants/code-snippets";
|
||||
|
||||
export const MyComponents: { [key: string]: any } = {
|
||||
default: (() => {
|
||||
const func = compileCode(CODE_SNIPPETS["react"]);
|
||||
return func(React);
|
||||
})(),
|
||||
error: function () {
|
||||
return <div>Error</div>;
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { useState } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useToast } from "@/components/ui/use-toast";
|
||||
import { executeCode } from "@/lib/api";
|
||||
|
||||
const Output = ({ codeValue, language }: any) => {
|
||||
const { toast } = useToast();
|
||||
const [output, setOutput] = useState<any>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isError, setIsError] = useState(false);
|
||||
|
||||
const runCode = async () => {
|
||||
if (!codeValue) return;
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const { run: result } = await executeCode(language, codeValue);
|
||||
setOutput(result.output.split("\n"));
|
||||
result.stderr ? setIsError(true) : setIsError(false);
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: "An error occurred.",
|
||||
description: (error as Error).message || "Unable to run code",
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-4">
|
||||
{/* <p>Output</p> */}
|
||||
<Button variant="outline" onClick={runCode} disabled={isLoading}>
|
||||
{isLoading ? "Running..." : "Run Code"}
|
||||
</Button>
|
||||
<div
|
||||
className={cn(
|
||||
"mt-4 p-4 rounded-md",
|
||||
isError ? "text-red-700 border border-red-700 bg-red-50" : "border",
|
||||
)}
|
||||
// color={isError ? "red.400" : ""}
|
||||
// borderColor={isError ? "red.500" : "#333"}
|
||||
>
|
||||
{output
|
||||
? output.map((line: any, i: number) => <p key={i}>{line}</p>)
|
||||
: 'Click "Run Code" to see the output here'}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Output;
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import React from "react";
|
||||
// import { useErrorBoundary } from "react-error-boundary";
|
||||
|
||||
const PreviewErrorFallback = ({ error, resetErrorBoundary }: any) => {
|
||||
// const { resetBoundary } = useErrorBoundary();
|
||||
|
||||
// console.log(error);
|
||||
return (
|
||||
<div className="bg-white text-black p-4 h-full">
|
||||
<div className="border border-red-700 text-red-700 bg-red-50 mb-4 p-4 rounded-md">
|
||||
<p className="mb-2 font-semibold">Something went wrong!</p>
|
||||
<p>{error.message}</p>
|
||||
</div>
|
||||
<Button variant="outline" onClick={resetErrorBoundary}>
|
||||
Reset
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PreviewErrorFallback;
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import React from "react";
|
||||
import { compileCode } from "./compiler";
|
||||
import { MyComponents } from "./my-components";
|
||||
|
||||
export default function Preview({
|
||||
componentName,
|
||||
tutorialCode,
|
||||
}: {
|
||||
componentName: string;
|
||||
tutorialCode: string;
|
||||
}) {
|
||||
// const Component =
|
||||
// componentName && MyComponents[componentName] ? (
|
||||
// MyComponents[componentName]
|
||||
// ) : (
|
||||
// <></>
|
||||
// );
|
||||
const Component =
|
||||
componentName !== ""
|
||||
? MyComponents[componentName]
|
||||
: compileCode(tutorialCode)(React);
|
||||
return <Component />;
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import * as React from "react";
|
||||
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
// @ts-ignore
|
||||
import monacoThemes from "monaco-themes/themes/themelist";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
|
||||
export function ThemeDropdown({ handleThemeChange, theme }: any) {
|
||||
const themes = Object.entries(monacoThemes)
|
||||
// .filter(([themeId, themeName]) => themeId !== "cobalt2")
|
||||
.map(([themeId, themeName]) => ({
|
||||
label: themeName,
|
||||
value: themeId,
|
||||
key: themeId,
|
||||
}));
|
||||
|
||||
return (
|
||||
<Select onValueChange={handleThemeChange} value={theme}>
|
||||
<SelectTrigger className="w-[150px]">
|
||||
<SelectValue placeholder="Select theme" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<ScrollArea className="h-96">
|
||||
<SelectGroup>
|
||||
<SelectLabel>Theme</SelectLabel>
|
||||
{themes.map(({ label, value, key }) => (
|
||||
<SelectItem className="cursor-pointer" key={key} value={value}>
|
||||
{label as string}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</ScrollArea>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue