feat: add basic problems layout

src/app/(main)/problems/[slug]/@answer/page.tsx

@@ -0,0 +1,12 @@
+export default async function AnswerPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const slug = (await params).slug;
+  return (
+    <div>
+      <h1>Answer Page: {slug}</h1>
+    </div>
+  );
+}

src/app/(main)/problems/[slug]/@console/page.tsx

@@ -0,0 +1,12 @@
+export default async function ConsolePage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const slug = (await params).slug;
+  return (
+    <div>
+      <h1>Console Page: {slug}</h1>
+    </div>
+  );
+}

src/app/(main)/problems/[slug]/@description/page.tsx

@@ -0,0 +1,12 @@
+export default async function DescriptionPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const slug = (await params).slug;
+  return (
+    <div>
+      <h1>Description Page: {slug}</h1>
+    </div>
+  );
+}

src/app/(main)/problems/[slug]/layout.tsx

@@ -0,0 +1,42 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+
+export default async function ProblemLayout({
+  children,
+  description,
+  answer,
+  console,
+}: {
+  children: React.ReactNode;
+  description: React.ReactNode;
+  answer: React.ReactNode;
+  console: React.ReactNode;
+}) {
+  return (
+    <div className="h-full rounded-b-xl">
+      {children}
+      <ResizablePanelGroup direction="horizontal" className="gap-0.5 p-2 pt-0">
+        <ResizablePanel
+          defaultSize={25}
+          className="hidden lg:block border rounded-lg"
+        >
+          {description}
+        </ResizablePanel>
+        <ResizableHandle className="hidden lg:block bg-transparent hover:bg-cyan-500" />
+        <ResizablePanel defaultSize={50} className="border rounded-lg">
+          {answer}
+        </ResizablePanel>
+        <ResizableHandle className="hidden xl:block bg-transparent hover:bg-cyan-500" />
+        <ResizablePanel
+          defaultSize={25}
+          className="hidden xl:block border rounded-lg"
+        >
+          {console}
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  );
+}

src/app/(main)/problems/[slug]/page.tsx

@@ -0,0 +1,3 @@
+export default function ProblemPage() {
+  return null;
+}

src/app/layout.tsx

@@ -27,7 +27,7 @@ export default function RootLayout({
           <AppSidebar />
           <SidebarInset>
             <Header />
-            <main>{children}</main>
+            <main className="h-full">{children}</main>
             <Toaster />
           </SidebarInset>
         </SidebarProvider>