fix: margin
This commit is contained in:
mehedi-hasan
parent
c105fcddac
commit
349381f7a2
|
|
@ -1,16 +1,5 @@
|
|||
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 TaskPage from "@/components/task-page";
|
||||
|
|
@ -18,10 +7,6 @@ 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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,20 +8,13 @@ import {
|
|||
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;
|
||||
|
|
@ -55,27 +48,6 @@ const TaskPage = ({
|
|||
"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 (
|
||||
<>
|
||||
<div className="flex md:hidden items-center justify-center gap-4 fixed md:static w-screen bottom-0 left-0 z-50 px-4 py-3 bg-background border-t">
|
||||
|
|
@ -99,11 +71,6 @@ const TaskPage = ({
|
|||
</Button>
|
||||
</div>
|
||||
<div className="md:hidden w-full h-full">
|
||||
{/* <ResizablePanelGroup
|
||||
direction="vertical"
|
||||
className="max-w-[1440px] mx-auto h-full"
|
||||
> */}
|
||||
{/* <ResizablePanel defaultSize={50}> */}
|
||||
<div
|
||||
className={cn(
|
||||
"fixed left-0 top-0 h-[calc(100vh-59px)] w-screen transition-transform translate-x-0",
|
||||
|
|
@ -136,16 +103,14 @@ const TaskPage = ({
|
|||
</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>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="h-[calc(100vh-calc(53px+59px))]">
|
||||
<div className="p-4 flex flex-col gap-4 h-full mb-14">
|
||||
<div className="p-4 flex flex-col gap-4 h-full mb-16">
|
||||
<div
|
||||
className={cn("grow", markdownStyles["markdown"])}
|
||||
dangerouslySetInnerHTML={{ __html: content }}
|
||||
|
|
@ -184,70 +149,14 @@ const TaskPage = ({
|
|||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
{/* </ResizablePanel> */}
|
||||
{/* <ResizableHandle withHandle /> */}
|
||||
{/* <ResizablePanel defaultSize={50}> */}
|
||||
|
||||
<EditorWindow
|
||||
activeMobileView={activeMobileView}
|
||||
language={params.taskId[0]}
|
||||
step={Number(params.taskId[1]) || 1}
|
||||
/>
|
||||
{/* </ResizablePanel> */}
|
||||
{/* </ResizablePanelGroup> */}
|
||||
</div>
|
||||
{/* <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)]">
|
||||
<div className="px-4 py-6 flex flex-col gap-4 h-full mb-[60vh]">
|
||||
<div
|
||||
className={cn("grow", markdownStyles["markdown"])}
|
||||
dangerouslySetInnerHTML={{ __html: content }}
|
||||
></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"
|
||||
|
|
@ -255,14 +164,14 @@ const TaskPage = ({
|
|||
>
|
||||
<ResizablePanel defaultSize={50}>
|
||||
<ScrollArea className="h-[calc(100vh-55px)]">
|
||||
<div className="px-4 py-6 flex flex-col gap-4 h-full">
|
||||
<div className="px-4 py-6 flex flex-col gap-4 h-full mb-6">
|
||||
<div
|
||||
className={cn("grow", markdownStyles["markdown"])}
|
||||
dangerouslySetInnerHTML={{ __html: content }}
|
||||
></div>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<div className="mb-6">
|
||||
<div >
|
||||
{langTutorial?.tutorial[tutorialIndex - 1] && (
|
||||
<Link
|
||||
href={`/dashboard/task/${params.taskId[0]}/${
|
||||
|
|
@ -277,7 +186,7 @@ const TaskPage = ({
|
|||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<div >
|
||||
{langTutorial?.tutorial[tutorialIndex + 1] && (
|
||||
<Link
|
||||
href={`/dashboard/task/${params.taskId[0]}/${
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ import {
|
|||
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";
|
||||
|
|
@ -93,13 +92,10 @@ export default function EditorWindow({
|
|||
if (!tutorial) {
|
||||
notFound();
|
||||
}
|
||||
// console.log(tutorial);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="md:hidden">
|
||||
{/* <ResizablePanelGroup direction="vertical" className="border-r">
|
||||
<ResizablePanel defaultSize={50}> */}
|
||||
<div
|
||||
className={cn(
|
||||
"fixed left-0 top-0 h-[calc(100vh-59px)] w-screen translate-x-full transition-transform ",
|
||||
|
|
@ -117,10 +113,6 @@ export default function EditorWindow({
|
|||
handleThemeChange={handleThemeChange}
|
||||
theme={theme}
|
||||
/>
|
||||
{/* <LanguagesDropdown
|
||||
handleLanguageChange={handleLanguageChange}
|
||||
language={lang}
|
||||
/> */}
|
||||
</div>
|
||||
<div className="h-[calc(100vh-calc(55px+53px))]">
|
||||
<CodeEditor
|
||||
|
|
@ -135,9 +127,7 @@ export default function EditorWindow({
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* </ResizablePanel> */}
|
||||
{/* <ResizableHandle withHandle /> */}
|
||||
{/* <ResizablePanel defaultSize={50}> */}
|
||||
|
||||
<ErrorBoundary FallbackComponent={PreviewErrorFallback}>
|
||||
<div
|
||||
className={cn(
|
||||
|
|
@ -167,8 +157,6 @@ export default function EditorWindow({
|
|||
)}
|
||||
</div>
|
||||
</ErrorBoundary>
|
||||
{/* </ResizablePanel> */}
|
||||
{/* </ResizablePanelGroup> */}
|
||||
</div>
|
||||
|
||||
<div className="hidden md:block h-[calc(100vh-55px)]">
|
||||
|
|
|
|||
Loading…
Reference in New Issue