fix: update course sidebar

src/components/Course/ChallengeView.tsx

@@ -3,7 +3,7 @@ import {
   ResizablePanel,
   ResizablePanelGroup,
 } from '../Resizable';
-import { CourseSidebar } from './CourseSidebar';
+import { CourseSidebar, type CourseSidebarProps } from './CourseSidebar';
 import { CourseLayout } from './CourseLayout';
 import {
   SqlCodeEditor,
@@ -11,16 +11,27 @@ import {
 } from '../SqlCodeEditor/SqlCodeEditor';
 import type { ReactNode } from 'react';
 
-type ChallengeViewProps = SqlCodeEditorProps & {
+type ChallengeViewProps = SqlCodeEditorProps &
-  children: ReactNode;
+  CourseSidebarProps & {
-};
+    children: ReactNode;
+  };
 
 export function ChallengeView(props: ChallengeViewProps) {
-  const { children, ...sqlCodeEditorProps } = props;
+  const {
+    children,
+    title,
+    chapters,
+    completedPercentage,
+    ...sqlCodeEditorProps
+  } = props;
 
   return (
     <CourseLayout>
-      <CourseSidebar />
+      <CourseSidebar
+        title={title}
+        chapters={chapters}
+        completedPercentage={completedPercentage}
+      />
 
       <ResizablePanelGroup direction="horizontal">
         <ResizablePanel defaultSize={60} minSize={20}>

src/components/Course/Chapter.tsx

@@ -1,39 +1,21 @@
 import { Check } from 'lucide-react';
 import { cn } from '../../lib/classname';
+import type {
+  ChallengeFileType,
+  ChapterFileType,
+  LessonFileType,
+  QuizFileType,
+} from '../../lib/course';
 
-export type Lesson = {
+type ChapterProps = ChapterFileType & {
-  slug: string;
   index: number;
-  title: string;
-};
-
-export type Quiz = {
-  slug: string;
-  index: number;
-  title: string;
-};
-
-export type Challenge = {
-  slug: string;
-  index: number;
-  title: string;
-};
-
-export type Chapter = {
-  index: number;
-  slug: string;
-  title: string;
-  lessons: Lesson[];
-  exercises: (Quiz | Challenge)[];
-};
-
-type ChapterProps = Chapter & {
   isActive?: boolean;
   isCompleted?: boolean;
 };
 
 export function Chapter(props: ChapterProps) {
-  const { index, title, lessons, exercises, isActive = false } = props;
+  const { index, frontmatter, lessons, exercises, isActive = false } = props;
+  const { title } = frontmatter;
 
   return (
     <div>
@@ -53,7 +35,7 @@ export function Chapter(props: ChapterProps) {
         <div className="flex flex-col border-b border-zinc-800">
           <div>
             {lessons.map((lesson) => (
-              <Lesson key={lesson.slug} {...lesson} isCompleted={false} />
+              <Lesson key={lesson.id} {...lesson} isCompleted={false} />
             ))}
           </div>
 
@@ -67,7 +49,7 @@ export function Chapter(props: ChapterProps) {
 
           <div>
             {exercises.map((exercise) => (
-              <Lesson key={exercise.slug} {...exercise} isCompleted={false} />
+              <Lesson key={exercise.id} {...exercise} isCompleted={false} />
             ))}
           </div>
         </div>
@@ -76,13 +58,14 @@ export function Chapter(props: ChapterProps) {
   );
 }
 
-type LessonProps = (Lesson | Quiz | Challenge) & {
+type LessonProps = (LessonFileType | QuizFileType | ChallengeFileType) & {
   isActive?: boolean;
   isCompleted?: boolean;
 };
 
 export function Lesson(props: LessonProps) {
-  const { title, isCompleted, isActive } = props;
+  const { frontmatter, isCompleted, isActive } = props;
+  const { title } = frontmatter;
 
   return (
     <a

src/components/Course/CourseSidebar.tsx

@@ -1,79 +1,37 @@
+import type { ChapterFileType } from '../../lib/course';
 import { Chapter } from './Chapter';
 
-export function CourseSidebar() {
+export type CourseSidebarProps = {
+  title: string;
+  chapters: ChapterFileType[];
+
+  completedPercentage: number;
+};
+
+export function CourseSidebar(props: CourseSidebarProps) {
+  const { title, chapters, completedPercentage } = props;
+
   return (
     <aside className="border-r border-zinc-800">
       <div className="border-b border-zinc-800 p-4">
-        <h2 className="text-lg font-semibold">Learn SQL</h2>
+        <h2 className="text-lg font-semibold">{title}</h2>
 
         <div className="mt-4">
-          <span>5% Completed</span>
+          <span>{completedPercentage}% Completed</span>
           <div className="mt-2 h-1 w-full bg-zinc-800"></div>
         </div>
       </div>
 
       <div className="relative h-full">
         <div className="absolute inset-0 overflow-y-auto [scrollbar-color:#3f3f46_#27272a;]">
-          <Chapter
+          {chapters.map((chapter, index) => (
-            slug="1"
+            <Chapter
-            index={1}
+              key={chapter.id}
-            title="DDL Queries"
+              isActive={index === 0}
-            lessons={[
+              index={index + 1}
-              {
+              {...chapter}
-                slug: '1',
+            />
-                index: 1,
+          ))}
-                title: 'Creating Tables',
-              },
-              {
-                slug: '2',
-                index: 2,
-                title: 'Altering Tables',
-              },
-            ]}
-            exercises={[
-              {
-                slug: '3',
-                index: 1,
-                title: 'Quiz 1',
-              },
-              {
-                slug: '4',
-                index: 2,
-                title: 'Challenge 1',
-              },
-            ]}
-          />
-
-          <Chapter
-            slug="2"
-            index={2}
-            title="DML Queries"
-            isActive={true}
-            lessons={[
-              {
-                slug: '5',
-                index: 1,
-                title: 'Inserting Data',
-              },
-              {
-                slug: '6',
-                index: 2,
-                title: 'Updating Data',
-              },
-            ]}
-            exercises={[
-              {
-                slug: '7',
-                index: 1,
-                title: 'Quiz 2',
-              },
-              {
-                slug: '8',
-                index: 2,
-                title: 'Challenge 2',
-              },
-            ]}
-          />
         </div>
       </div>
     </aside>

src/pages/learn-sql/index.astro

@@ -4,6 +4,7 @@ import type { ChallengeFileType } from '../../lib/course';
 import { getCourseById, getCourseExerciseById } from '../../lib/course';
 
 const course = await getCourseById('sql');
+
 const exercise = (await getCourseExerciseById(
   'sql',
   'introduction',
@@ -12,6 +13,9 @@ const exercise = (await getCourseExerciseById(
 ---
 
 <ChallengeView
+  title={exercise.frontmatter.title}
+  chapters={course.chapters}
+  completedPercentage={0}
   defaultValue={exercise.frontmatter.defaultValue}
   expectedResults={exercise.frontmatter.expectedResults}
   initSteps={exercise.frontmatter.initSteps}