learn route structure setup completed, made sidebar functional

aayank13 · Nov 6, 2024 · 8a96131 · 8a96131
1 parent 116493f
commit 8a96131
Show file tree

Hide file tree

Showing 11 changed files with 483 additions and 430 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -4,7 +4,8 @@ import { ThemeProvider } from "@/context/ThemeContext";
 
 export const metadata: Metadata = {
   title: "ML4E - Machine Learning for Everyone",
-  description: "ML4E - Machine Learning for Everyone is a collection of resources to help you learn machine learning.",
+  description:
+    "ML4E - Machine Learning for Everyone is a collection of resources to help you learn machine learning.",
 };
 
 export default function RootLayout({
@@ -14,11 +15,11 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-        <body>
-            <ThemeProvider>
-                {children}
-            </ThemeProvider>
-        </body>
+      <body>
+        <ThemeProvider>
+          {children}
+        </ThemeProvider>
+      </body>
     </html>
-);
+  );
 }
diff --git a/app/learn/[category]/[subcategory]/page.tsx b/app/learn/[category]/[subcategory]/page.tsx
@@ -0,0 +1,20 @@
+import { contentData, ContentItem } from "@/data/content";
+
+export default async function LearnPage({ params }: { params: { category: string; subcategory: string } }) {
+  // Wait for params to be available
+  const { category, subcategory } = await Promise.resolve(params); // Ensures params are handled asynchronously
+
+  // Safely access content based on params
+  const content: ContentItem | undefined = contentData[category]?.items?.[subcategory];
+
+  if (!content) {
+    return <div>Content not found</div>;
+  }
+
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-4">{content.title}</h1>
+      <p>{content.content}</p>
+    </div>
+  );
+}
diff --git a/app/learn/layout.tsx b/app/learn/layout.tsx
@@ -1,21 +1,25 @@
-import React from 'react';
-import { Metadata } from 'next';
-import { SidebarProvider } from "@/components/ui/sidebar"
+import React from "react";
+import { Metadata } from "next";
+import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
 import AppSidebar from "@/components/custom/AppSidebar";
+// import LearnNavbar from "@/components/custom/LearnNavbar";
 
 export const metadata: Metadata = {
-    title: "Learn - ML4E",
-    description: "ML4E - Machine Learning for Everyone is a collection of resources to help you learn machine learning.",
+  title: "Learn - ML4E",
+  description: "ML4E - Machine Learning for Everyone is a collection of resources to help you learn machine learning.",
 };
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-    return (
-      <SidebarProvider>
+  return (
+    <SidebarProvider>
+      <div className="flex h-screen overflow-hidden">
         <AppSidebar />
-        <main>
+        <div className="flex-1 overflow-auto p-4">
+          <SidebarTrigger />
+          {/* <LearnNavbar /> */}
           {children}
-        </main>
-      </SidebarProvider>
-    )
-}
-  
+        </div>
+      </div>
+    </SidebarProvider>
+  );
+}
diff --git a/app/learn/page.tsx b/app/learn/page.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 
-const page = () => {
+const Learn = () => {
   return (
-    <div></div>
+    <div>hello</div>
   )
 }
 
-export default page
+export default Learn