feat: empty view

src/components/Course/CourseLayout.tsx

@@ -17,7 +17,7 @@ import { RoadmapLogoIcon } from '../ReactIcons/RoadmapLogo';
 
 export type CourseLayoutProps = {
   children: ReactNode;
-} & Omit<CourseSidebarProps, 'completedPercentage'>;
+} & Omit<CourseSidebarProps, 'completedPercentage' | 'isLoading'>;
 
 export function CourseLayout(props: CourseLayoutProps) {
   const { children, ...sidebarProps } = props;

src/components/Course/EmptyView.tsx

@@ -0,0 +1,17 @@
+import { CourseLayout, type CourseLayoutProps } from './CourseLayout';
+import { BookOpenIcon } from 'lucide-react';
+
+type EmptyViewProps = Omit<CourseLayoutProps, 'children'> & {};
+
+export function EmptyView(props: EmptyViewProps) {
+  return (
+    <CourseLayout {...props}>
+      <div className="mx-auto flex max-w-sm flex-col items-center justify-center gap-2 p-4 text-gray-700">
+        <BookOpenIcon className="size-24" />
+        <p className="text-balance text-center text-lg font-medium">
+          Select a lesson from the left sidebar to get started.
+        </p>
+      </div>
+    </CourseLayout>
+  );
+}

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

@@ -1,4 +1,5 @@
 ---
+import { EmptyView } from '../../../../components/Course/EmptyView';
 import SkeletonLayout from '../../../../layouts/SkeletonLayout.astro';
 import {
   getAllCourses,
@@ -20,7 +21,10 @@ export async function getStaticPaths() {
             chapterId: chapter.id,
           },
           props: {
-            course,
+            course: {
+              ...course,
+              chapters,
+            },
             chapter,
           },
         };
@@ -37,27 +41,20 @@ interface Params extends Record<string, string | undefined> {
 }
 
 interface Props {
-  course: CourseFileType;
+  course: CourseFileType & { chapters: ChapterFileType[] };
   chapter: ChapterFileType;
 }
 
 const { courseId, chapterId } = Astro.params;
-const { chapter } = Astro.props;
+const { course } = Astro.props;
-
-const firstLesson = chapter.lessons?.sort(
-  (a, b) => a.frontmatter.order - b.frontmatter.order,
-)?.[0];
-
-const fullUrl = firstLesson
-  ? `/learn/${courseId}/${chapterId}/${firstLesson?.id}`
-  : `/learn/${courseId}`;
 ---
 
-<SkeletonLayout title='Redirecting..' noIndex={true} redirectUrl={fullUrl}>
+<SkeletonLayout title={course.frontmatter.title}>
-  <div class='p-8'>
+  <EmptyView
-    <h2 class='text-xl font-bold'>Redirecting ..</h2>
+    activeCourseId={courseId}
-    <p>Click the link below if you are not redirected automatically.</p>
+    activeChapterId={chapterId}
-
+    title={course.frontmatter.title}
-    <p><a href={fullUrl} class='text-blue-700 underline'>{fullUrl}</a></p>
+    chapters={course.chapters}
-  </div>
+    client:load
+  />
 </SkeletonLayout>