feat: make explore more visible in lms

apps/dashboard/src/lib/features/course/components/card-list.svelte

@@ -2,15 +2,16 @@
   import * as Item from '@cio/ui/base/item';
   import Card, { type Props as CardProps } from './card.svelte';
 
-  type Props = Omit<CardProps, 'course'> & {
+  type Props = Omit<CardProps, 'course' | 'onExploreClick'> & {
     courses: CardProps['course'][];
+    onCardClick?: (course: CardProps['course']) => void;
   };
 
-  let { courses, ...rest }: Props = $props();
+  let { courses, onCardClick, ...rest }: Props = $props();
 </script>
 
 <Item.Group class="grid! w-full grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
   {#each courses as course (course.id)}
-    <Card {course} {...rest} />
+    <Card {course} {...rest} onExploreClick={onCardClick ? () => onCardClick(course) : undefined} />
   {/each}
 </Item.Group>

apps/dashboard/src/lib/features/course/components/card.svelte

@@ -38,9 +38,10 @@
     isExplore?: boolean;
     href?: string;
     actions?: Snippet;
+    onExploreClick?: () => void;
   }
 
-  let { course, isOnLandingPage, isLMS, isExplore, href, actions }: Props = $props();
+  let { course, isOnLandingPage, isLMS, isExplore, href, actions, onExploreClick }: Props = $props();
 
   let {
     bannerImage,
@@ -141,6 +142,10 @@
   let cost = $derived(calcCourseDiscount(pricingData.discount, pricingData.cost ?? 0, !!pricingData.showDiscount));
 
   let courseUrl = $derived.by(() => {
+    if (onExploreClick && isLMS && isExplore) {
+      return undefined;
+    }
+
     if (href) {
       return href;
     }
@@ -299,7 +304,7 @@
       </div>
 
       {#if isLMS}
-        <Button variant="outline">
+        <Button variant="outline" onclick={isExplore && onExploreClick ? onExploreClick : undefined}>
           {isExplore ? $t('courses.course_card.learn_more') : $t('courses.course_card.continue_course')}
 
           <ArrowRightIcon class="custom" />