mehedi
/
skilld-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: margin

This commit is contained in:
mehedi-hasan 2024-04-21 19:23:50 +06:00
parent c105fcddac
commit 349381f7a2
3 changed files with 6 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/(dashboard)/dashboard/(task)/task/[...taskId]/page.tsx
View File

@ -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 { tutorialData } from "@/constants/tutorial-data";
import { notFound } from "next/navigation"; 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 { LANGUAGE_VERSIONS } from "@/constants/language-options";
import { markdownToHtml } from "@/lib/markdown-to-html"; import { markdownToHtml } from "@/lib/markdown-to-html";
import TaskPage from "@/components/task-page"; import TaskPage from "@/components/task-page";
@ -18,10 +7,6 @@ import TaskPage from "@/components/task-page";
const languages = Object.keys(LANGUAGE_VERSIONS); const languages = Object.keys(LANGUAGE_VERSIONS);
const Page = async ({ params }: { params: { taskId: string[] } }) => { const Page = async ({ params }: { params: { taskId: string[] } }) => {
// const [activeMobileView, setActiveMobileView] = useState<
// "tutorial" | "code" | "output"
// >("tutorial");
if (!params.taskId[0] || !languages.includes(params.taskId[0])) { if (!params.taskId[0] || !languages.includes(params.taskId[0])) {
notFound(); notFound();
} }

101
src/components/task-page.tsx
View File

@ -8,20 +8,13 @@ import {
ResizablePanelGroup, ResizablePanelGroup,
} from "@/components/ui/resizable"; } from "@/components/ui/resizable";
import markdownStyles from "@/styles/markdown-styles.module.css"; 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 { Button, buttonVariants } from "@/components/ui/button";
import Link from "next/link"; import Link from "next/link";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import EditorWindow from "@/components/task/editor-window"; 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 Image from "next/image";
import ThemeToggle from "./layout/ThemeToggle/theme-toggle"; import ThemeToggle from "./layout/ThemeToggle/theme-toggle";
const languages = Object.keys(LANGUAGE_VERSIONS);
interface LangTutorial { interface LangTutorial {
id: number; id: number;
language: string; language: string;
@ -55,27 +48,6 @@ const TaskPage = ({
"tutorial" | "code" | "output" "tutorial" | "code" | "output"
>("tutorial"); >("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 ( 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"> <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> </Button>
</div> </div>
<div className="md:hidden w-full h-full"> <div className="md:hidden w-full h-full">
{/* <ResizablePanelGroup
direction="vertical"
className="max-w-[1440px] mx-auto h-full"
> */}
{/* <ResizablePanel defaultSize={50}> */}
<div <div
className={cn( className={cn(
"fixed left-0 top-0 h-[calc(100vh-59px)] w-screen transition-transform translate-x-0", "fixed left-0 top-0 h-[calc(100vh-59px)] w-screen transition-transform translate-x-0",
@ -136,16 +103,14 @@ const TaskPage = ({
</Link> </Link>
<div className="flex items-center gap-8"> <div className="flex items-center gap-8">
{/* <Link href="/">Home</Link> */}
<Link href="/dashboard">Dashboard</Link> <Link href="/dashboard">Dashboard</Link>
{/* <Link href="/login">Login</Link> */}
<ThemeToggle /> <ThemeToggle />
</div> </div>
</nav> </nav>
</div> </div>
<ScrollArea className="h-[calc(100vh-calc(53px+59px))]"> <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 <div
className={cn("grow", markdownStyles["markdown"])} className={cn("grow", markdownStyles["markdown"])}
dangerouslySetInnerHTML={{ __html: content }} dangerouslySetInnerHTML={{ __html: content }}
@ -184,70 +149,14 @@ const TaskPage = ({
</div> </div>
</ScrollArea> </ScrollArea>
</div> </div>
{/* </ResizablePanel> */}
{/* <ResizableHandle withHandle /> */}
{/* <ResizablePanel defaultSize={50}> */}
<EditorWindow <EditorWindow
activeMobileView={activeMobileView} activeMobileView={activeMobileView}
language={params.taskId[0]} language={params.taskId[0]}
step={Number(params.taskId[1]) || 1} step={Number(params.taskId[1]) || 1}
/> />
{/* </ResizablePanel> */}
{/* </ResizablePanelGroup> */}
</div> </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"> <div className="hidden md:block w-full h-full">
<ResizablePanelGroup <ResizablePanelGroup
direction="horizontal" direction="horizontal"
@ -255,14 +164,14 @@ const TaskPage = ({
> >
<ResizablePanel defaultSize={50}> <ResizablePanel defaultSize={50}>
<ScrollArea className="h-[calc(100vh-55px)]"> <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 <div
className={cn("grow", markdownStyles["markdown"])} className={cn("grow", markdownStyles["markdown"])}
dangerouslySetInnerHTML={{ __html: content }} dangerouslySetInnerHTML={{ __html: content }}
></div> ></div>
<div className="flex justify-between"> <div className="flex justify-between">
<div className="mb-6"> <div >
{langTutorial?.tutorial[tutorialIndex - 1] && ( {langTutorial?.tutorial[tutorialIndex - 1] && (
<Link <Link
href={`/dashboard/task/${params.taskId[0]}/${ href={`/dashboard/task/${params.taskId[0]}/${
@ -277,7 +186,7 @@ const TaskPage = ({
)} )}
</div> </div>
<div className="mb-6"> <div >
{langTutorial?.tutorial[tutorialIndex + 1] && ( {langTutorial?.tutorial[tutorialIndex + 1] && (
<Link <Link
href={`/dashboard/task/${params.taskId[0]}/${ href={`/dashboard/task/${params.taskId[0]}/${

14
src/components/task/editor-window.tsx
View File

@ -12,7 +12,6 @@ import {
ResizablePanelGroup, ResizablePanelGroup,
} from "@/components/ui/resizable"; } from "@/components/ui/resizable";
import { ThemeDropdown } from "./theme-dropdown"; import { ThemeDropdown } from "./theme-dropdown";
import LanguagesDropdown from "./languages-dropdown";
import Output from "./output"; import Output from "./output";
import { tutorialData } from "@/constants/tutorial-data"; import { tutorialData } from "@/constants/tutorial-data";
import { notFound, useRouter } from "next/navigation"; import { notFound, useRouter } from "next/navigation";
@ -93,13 +92,10 @@ export default function EditorWindow({
if (!tutorial) { if (!tutorial) {
notFound(); notFound();
} }
// console.log(tutorial);
return ( return (
<> <>
<div className="md:hidden"> <div className="md:hidden">
{/* <ResizablePanelGroup direction="vertical" className="border-r">
<ResizablePanel defaultSize={50}> */}
<div <div
className={cn( className={cn(
"fixed left-0 top-0 h-[calc(100vh-59px)] w-screen translate-x-full transition-transform ", "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} handleThemeChange={handleThemeChange}
theme={theme} theme={theme}
/> />
{/* <LanguagesDropdown
handleLanguageChange={handleLanguageChange}
language={lang}
/> */}
</div> </div>
<div className="h-[calc(100vh-calc(55px+53px))]"> <div className="h-[calc(100vh-calc(55px+53px))]">
<CodeEditor <CodeEditor
@ -135,9 +127,7 @@ export default function EditorWindow({
/> />
</div> </div>
</div> </div>
{/* </ResizablePanel> */}
{/* <ResizableHandle withHandle /> */}
{/* <ResizablePanel defaultSize={50}> */}
<ErrorBoundary FallbackComponent={PreviewErrorFallback}> <ErrorBoundary FallbackComponent={PreviewErrorFallback}>
<div <div
className={cn( className={cn(
@ -167,8 +157,6 @@ export default function EditorWindow({
)} )}
</div> </div>
</ErrorBoundary> </ErrorBoundary>
{/* </ResizablePanel> */}
{/* </ResizablePanelGroup> */}
</div> </div>
<div className="hidden md:block h-[calc(100vh-55px)]"> <div className="hidden md:block h-[calc(100vh-55px)]">