fix: refactor

src/components/Course/ChallengeView.tsx

@@ -6,6 +6,7 @@ import {
 import { SqlCodeEditor } from '../SqlCodeEditor/SqlCodeEditor';
 import type { ReactNode } from 'react';
 import type { LessonFileType } from '../../lib/course';
+import { LessonView } from './LessonView';
 
 type ChallengeViewProps = {
   lesson: LessonFileType;
@@ -21,11 +22,7 @@ export function ChallengeView(props: ChallengeViewProps) {
   return (
     <ResizablePanelGroup direction="horizontal">
       <ResizablePanel defaultSize={60} minSize={20}>
-        <div className="relative h-full">
-          <div className="absolute inset-0 overflow-y-auto [scrollbar-color:#3f3f46_#27272a;]">
-            <div className="mx-auto max-w-xl p-4">{children}</div>
-          </div>
-        </div>
+        <LessonView>{children}</LessonView>
       </ResizablePanel>
 
       <ResizableHandle withHandle={true} />

src/components/Course/Chapter.tsx

@@ -43,7 +43,11 @@ export function Chapter(props: ChapterProps) {
   const filteredLessons = useMemo(
     () =>
       lessons
-        ?.filter((lesson) => lesson.frontmatter.type === 'lesson')
+        ?.filter((lesson) =>
+          ['lesson', 'lesson-challenge', 'lesson-quiz'].includes(
+            lesson.frontmatter.type,
+          ),
+        )
         ?.sort((a, b) => a.frontmatter.order - b.frontmatter.order) || [],
     [lessons],
   );

src/components/Course/LessonQuizView.tsx

@@ -0,0 +1,33 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '../Resizable';
+import { SqlCodeEditor } from '../SqlCodeEditor/SqlCodeEditor';
+import type { ReactNode } from 'react';
+import type { LessonFileType } from '../../lib/course';
+import { LessonView } from './LessonView';
+import { QuizView } from './QuizView';
+
+type LessonQuizViewProps = {
+  lesson: LessonFileType;
+  children: ReactNode;
+};
+
+export function LessonQuizView(props: LessonQuizViewProps) {
+  const { children, lesson } = props;
+
+  return (
+    <ResizablePanelGroup direction="horizontal">
+      <ResizablePanel defaultSize={50} minSize={20}>
+        <LessonView>{children}</LessonView>
+      </ResizablePanel>
+
+      <ResizableHandle withHandle={true} />
+
+      <ResizablePanel defaultSize={50} minSize={20}>
+        <QuizView lesson={lesson} />
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  );
+}

src/components/Course/LessonView.tsx

@@ -10,7 +10,11 @@ export function LessonView(props: LessonViewProps) {
   return (
     <div className="relative h-full">
       <div className="absolute inset-0 overflow-y-auto [scrollbar-color:#3f3f46_#27272a;]">
-        <div className="mx-auto max-w-xl p-4">{children}</div>
+        <div className="mx-auto max-w-xl p-4">
+          <div className="course-content prose prose-lg prose-invert mt-8 text-zinc-300 prose-headings:mb-3 prose-headings:mt-8 prose-code:text-zinc-100 prose-li:my-1 prose-thead:border-zinc-800 prose-tr:border-zinc-800">
+            {children}
+          </div>
+        </div>
       </div>
     </div>
   );

src/components/Course/QuizView.tsx

@@ -35,7 +35,7 @@ export function QuizView(props: QuizViewProps) {
       <div className="absolute inset-0 overflow-y-auto [scrollbar-color:#3f3f46_#27272a;]">
         <div className="mx-auto max-w-xl p-4 py-10">
           <h3 className="mb-10 text-lg font-semibold">
-            SQL Quiz: Intermediate
+            {lesson.frontmatter.title}
           </h3>
 
           <div className="flex flex-col gap-3">

src/data/courses/sql/chapters/introduction/lessons/welcome-quiz.md

@@ -0,0 +1,71 @@
+---
+title: Welcome Quiz
+description: Learn the basics of SQL, the language for querying databases.
+order: 150
+type: lesson-quiz
+questions:
+  - id: 1
+    title: 'Which of the following SQL clauses is used to filter results after the GROUP BY clause?'
+    options:
+      - id: 1
+        text: 'WHERE'
+      - id: 2
+        text: 'HAVING'
+        isCorrectOption: true
+      - id: 3
+        text: 'GROUP BY'
+      - id: 4
+        text: 'ORDER BY'
+  - id: 2
+    title: 'Which SQL function is used to return the first non-null expression?'
+    options:
+      - id: 1
+        text: 'COALESCE'
+        isCorrectOption: true
+      - id: 2
+        text: 'IFNULL'
+      - id: 3
+        text: 'NULLIF'
+      - id: 4
+        text: 'NVL'
+  - id: 3
+    title: 'What is the purpose of an SQL CTE (Common Table Expression)?'
+    options:
+      - id: 1
+        text: 'To create temporary tables that last for the duration of a query'
+        isCorrectOption: true
+      - id: 2
+        text: 'To define reusable views'
+      - id: 3
+        text: 'To encapsulate subqueries'
+      - id: 4
+        text: 'To optimize the execution of queries'
+  - id: 4
+    title: 'In an SQL window function, which clause defines the subset of rows to apply the function on?'
+    options:
+      - id: 1
+        text: 'ORDER BY'
+      - id: 2
+        text: 'PARTITION BY'
+        isCorrectOption: true
+      - id: 3
+        text: 'GROUP BY'
+      - id: 4
+        text: 'DISTINCT'
+  - id: 5
+    title: 'Which SQL join returns all rows when there is a match in either of the tables?'
+    options:
+      - id: 1
+        text: 'INNER JOIN'
+      - id: 2
+        text: 'LEFT JOIN'
+      - id: 3
+        text: 'RIGHT JOIN'
+      - id: 4
+        text: 'FULL OUTER JOIN'
+        isCorrectOption: true
+---
+
+The SQL language is widely used today across web frameworks and database applications. Knowing SQL gives you the freedom to explore your data, and the power to make better decisions. By learning SQL, you will also learn concepts that apply to nearly every data storage system.
+
+The statements covered in this course use SQLite Relational Database Management System (RDBMS). You can also access a glossary of all the SQL commands taught in this course.

src/lib/course.ts

@@ -10,7 +10,7 @@ export type LessonFrontmatter = {
   title: string;
   description: string;
   order: number;
-  type: 'lesson' | 'challenge' | 'quiz';
+  type: 'lesson' | 'challenge' | 'quiz' | 'lesson-challenge' | 'lesson-quiz';
 
   defaultValue?: string;
   initSteps?: string[];

src/pages/learn/[courseId]/[chapterId]/[lessonId].astro

@@ -2,6 +2,7 @@
 import { ChallengeView } from '../../../../components/Course/ChallengeView';
 import { LessonView } from '../../../../components/Course/LessonView';
 import { QuizView } from '../../../../components/Course/QuizView';
+import { LessonQuizView } from '../../../../components/Course/LessonQuizView';
 import { CourseLayout } from '../../../../components/Course/CourseLayout';
 import SkeletonLayout from '../../../../layouts/SkeletonLayout.astro';
 import {
@@ -82,11 +83,10 @@ const { course, chapter, lesson } = Astro.props;
     client:load
   >
     {
-      lesson.frontmatter.type === 'challenge' && (
+      (lesson.frontmatter.type === 'challenge' ||
+        lesson.frontmatter.type === 'lesson-challenge') && (
         <ChallengeView lesson={lesson} client:load>
-          <div class='course-content prose prose-lg prose-invert mt-8 text-zinc-300 prose-headings:mb-3 prose-headings:mt-8 prose-code:text-zinc-100 prose-li:my-1 prose-thead:border-zinc-800 prose-tr:border-zinc-800'>
-            <lesson.Content />
-          </div>
+          <lesson.Content />
         </ChallengeView>
       )
     }
@@ -94,9 +94,7 @@ const { course, chapter, lesson } = Astro.props;
     {
       lesson.frontmatter.type === 'lesson' && (
         <LessonView client:load>
-          <div class='course-content prose prose-lg prose-invert mt-8 text-zinc-300 prose-headings:mb-3 prose-headings:mt-8 prose-code:text-zinc-100 prose-li:my-1 prose-thead:border-zinc-800 prose-tr:border-zinc-800'>
-            <lesson.Content />
-          </div>
+          <lesson.Content />
         </LessonView>
       )
     }
@@ -106,5 +104,13 @@ const { course, chapter, lesson } = Astro.props;
         <QuizView lesson={lesson} client:load />
       )
     }
+
+    {
+      lesson.frontmatter.type === 'lesson-quiz' && (
+        <LessonQuizView lesson={lesson} client:load>
+          <lesson.Content />
+        </LessonQuizView>
+      )
+    }
   </CourseLayout>
 </SkeletonLayout>