feat: course details page design

frontend/src/pages/Batches.vue

@@ -0,0 +1,34 @@
+<template>
+    <div class="h-screen">
+        <header
+            class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
+        >
+            <Breadcrumbs class="h-7" :items="[{ label: __('All Batches'), route: { name: 'Batches' } }]"/>
+            <div class="flex">
+                <Button variant="solid">
+                    <template #prefix>
+                        <Plus class="h-4 w-4" />
+                    </template>
+                    {{ __("New Batch") }}
+                </Button>
+            </div>
+        </header>
+        <div class="mx-5 my-10">
+            <div class="grid grid-cols-3 gap-8 mt-5">
+                <BatchCard v-for="batch in batches.data" :batch="batch" />
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+import { createResource, Breadcrumbs } from "frappe-ui";
+import { Plus } from "lucide-vue-next"
+import BatchCard from '@/components/BatchCard.vue';
+
+const batches = createResource({
+    url: "lms.lms.utils.get_batches",
+    cache: ["batches"],
+    auto: true,
+});
+console.log(batches)
+</script>

frontend/src/pages/CourseDetail.vue

@@ -43,17 +43,17 @@
                     </div>
                 </div>
             </div>
-            <div class="grid grid-cols-[70%,20%] gap-10">
-                <div>
-                    <div v-html="course.data.description"></div>
+            <div class="grid grid-cols-[60%,20%] gap-20 mt-10">
+                <div class="">
+                    <div v-html="course.data.description" class="course-description"></div>
                     <CourseOutline :courseName="course.data.name"/>
+                    <CourseReviews :courseName="course.data.name" :avg_rating="course.data.avg_rating"/>
                 </div>
                 <div>
                     <CourseCardOverlay :course="course"/>
                 </div>
             </div>
         </div>
-        
     </div>
 </template>
 <script setup>
@@ -62,6 +62,7 @@ import { computed } from "vue";
 import { BookOpen, Users, Star } from 'lucide-vue-next'
 import CourseCardOverlay from '@/components/CourseCardOverlay.vue';
 import CourseOutline from '@/components/CourseOutline.vue';
+import CourseReviews from '@/components/CourseReviews.vue';
 
 const props = defineProps({
     courseName: {
@@ -69,7 +70,7 @@ const props = defineProps({
         required: true,
     },
 })
-console.log(props.courseName)
+
 const course = createResource({
     url: "lms.lms.utils.get_course_details",
     cache: ["course", props.courseName],
@@ -78,7 +79,7 @@ const course = createResource({
     },
     auto: true,
 });
-console.log(course)
+
 const breadcrumbs = computed(() => {
     let items = [{ label: "All Courses", route: { name: "Courses" } }]
     items.push({
@@ -87,4 +88,19 @@ const breadcrumbs = computed(() => {
     })
     return items
 })
-</script>
+</script>
+<style>
+.course-description p {
+    margin-bottom: 1rem;
+    line-height: 1.7;
+}
+.course-description li {
+    line-height: 1.7;
+}
+
+.course-description ol {
+    list-style: auto;
+    margin: revert;
+    padding: revert;
+}
+</style>

frontend/src/pages/Courses.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-screen">
+    <div class="h-screen">
     <header
           class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
         >

frontend/src/pages/Lesson.vue

@@ -0,0 +1,27 @@
+<template>
+    Lesson Page
+</template>
+<script setup>
+import { createResource, Button } from "frappe-ui";
+
+const props = defineProps({
+    courseName: {
+        type: String,
+        required: true,
+    },
+    lessonNumber: {
+        type: Number,
+        required: true,
+    },
+});
+
+const lesson = createResource({
+    url: "lms.lms.utils.get_lesson",
+    cache: ["lesson", props.courseName, props.lessonNumber],
+    params: {
+        course: props.courseName,
+        lesson: props.lessonNumber,
+    },
+    auto: true,
+});
+</script>