fixing styles, improving getNumberOfCourses

TeaByte · Jan 18, 2024 · 7b09009 · 7b09009
1 parent cc031d1
commit 7b09009
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 22 deletions.
diff --git a/components/Courses.tsx b/components/Courses.tsx
@@ -9,20 +9,21 @@ export default function Courses(
   { courses, completed }: {
     courses: (Course | CourseGroup)[];
     completed: string[];
-
   },
 ) {
   const total = getNumberOfCourses(courses);
   return (
     <>
-    <div className="py-2 bg-base-300 p-4 rounded-md">
-      <ProgressPageSplit
+      <div className="py-2 bg-base-300 p-4 rounded-md">
+        <ProgressPageSplit
           completed={completed.length}
           total={total}
         />
       </div>
-      <div className="py-2">
-        <h1 class="w-1/2 max-md:w-full text-5xl font-bold z-10 mb-2 my-auto">الاساسيات</h1>
+      <div className="mt-5">
+        <h1 class="w-1/2 max-md:w-full text-5xl font-bold z-10 mb-2 my-auto">
+          الاساسيات
+        </h1>
       </div>
       <section class="flex flex-col gap-2 mb-4">
         {courses.map((course, index) => {
@@ -43,7 +44,9 @@ export default function Courses(
               <div key={course.slug}>
                 <CourseCard
                   course={course}
-                  isDone={completed ? completed.includes(course.slug.replace("\\", "/")) : false}
+                  isDone={completed
+                    ? completed.includes(course.slug.replace("\\", "/"))
+                    : false}
                 />
               </div>
             );

diff --git a/components/ProgressBar.tsx b/components/ProgressBar.tsx
@@ -1,10 +1,10 @@
 export default function ProgressBar(props: { progress: number }) {
   const widthStyle = { width: `${props.progress}%` };
   return (
-    <div className="bg-base-100 rounded-xl shadow-sm overflow-hidden p-1">
+    <div className="bg-base-100 rounded-box shadow-sm overflow-hidden p-1">
       <div className="relative h-6 flex items-center justify-center">
         <div
-          className="absolute top-0 bottom-0 right-0 rounded-lg bg-info"
+          className="absolute top-0 bottom-0 right-0 rounded-box bg-btn"
           style={widthStyle}
         >
           <div className="relative text-black font-medium text-sm text-center">

diff --git a/routes/index.tsx b/routes/index.tsx
@@ -22,14 +22,14 @@ export const handler: Handlers<Props> = {
     if (!session) {
       return ctx.render({
         completed: [],
-        courses: courses.courses
+        courses: courses.courses,
       });
     }
     const completed = (await getStudent(session))
       ?.completedCourses ?? [];
     return ctx.render({
       completed,
-      courses: courses.courses
+      courses: courses.courses,
     });
   },
 };
@@ -55,7 +55,7 @@ export default function BlogIndexPage(
           content="وجهتك الأمثل لاكتساب مهارات جافاسكربت بسهولة وفعالية. رحلة تعليمية شيقة تمتد من الأساسيات إلى المستويات المتقدمة"
         />
       </Head>
-      <main className="max-w-screen-md px-4 pt-12 mx-auto mb-6">
+      <main className="max-w-screen-md px-4 pt-8 mx-auto mb-6">
         <Courses completed={completed} courses={courses} />
       </main>
       <Footer />

diff --git a/utils/course.ts b/utils/course.ts
@@ -109,16 +109,7 @@ export async function getCourses(
 }
 
 export function getNumberOfCourses(courses: (Course | CourseGroup)[]) {
-  const slugs = courses.map((c) => {
-    if ("courses" in c) {
-      c.courses.sort((a, b) => a.order - b.order);
-      return c.courses.map((c) => c.slug.replace("\\", "/"));
-    }
-    return c.slug.replace("\\", "/");
-  });
-  const FlatSlugs = slugs.flat();
-  return FlatSlugs.length;
-
+  return CoursesCount;
 }
 
 export async function findNextCourse(slug: string) {
@@ -152,4 +143,4 @@ export async function findPrevCourse(slug: string) {
     return slug;
   }
   return FlatSlugs[index - 1];
-}
+}