47 lines
1.5 KiB
Vue
47 lines
1.5 KiB
Vue
<template>
|
|
<div class="shadow rounded-md" style="width: 300px;">
|
|
<iframe v-if="course.data.video_link" :src="video_link" class="rounded-t-md" />
|
|
<div class="p-5">
|
|
<Button variant="solid" class="w-full mb-3">
|
|
<span>
|
|
{{ __("Start Learning") }}
|
|
</span>
|
|
</Button>
|
|
<div class="flex items-center mb-3">
|
|
<Users class="h-4 w-4 text-gray-700"/>
|
|
<span class="ml-1">
|
|
{{ course.data.enrollment_count }} {{ __("Enrolled") }}
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center mb-3">
|
|
<BookOpen class="h-4 w-4 text-gray-700"/>
|
|
<span class="ml-1">
|
|
{{ course.data.lesson_count }} {{ __("Lessons") }}
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<Star class="h-4 w-4 fill-orange-500 text-gray-100"/>
|
|
<span class="ml-1">
|
|
{{ course.data.avg_rating }} {{ __("Rating") }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { BookOpen, Users, Star } from 'lucide-vue-next'
|
|
import { computed } from 'vue'
|
|
const props = defineProps({
|
|
course: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const video_link = computed(() => {
|
|
if (props.course.data.video_link) {
|
|
return "https://www.youtube.com/embed/" + props.course.data.video_link;
|
|
}
|
|
return null;
|
|
});
|
|
</script> |