Merge pull request #871 from tutors-sdk/ux/links-style

animation effect

src/routes/(home)/CourseList.svelte

@@ -30,18 +30,19 @@
 <div class="card container mx-auto my-1 p-4">
   <p class="p-4 text-2xl">Favourites</p>
   <div class="mx-auto grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
-    {#each courseVisits as courseVisit}
-      {#if courseVisit.favourite}
+    {#each courseVisits.filter((cv) => cv.favourite) as courseVisit (courseVisit.id)}
+      <div animate:flip={{ duration: 300 }}>
         <CourseVisitCard {courseVisit} {deleteCourse} {starUnstarCourse} />
-      {/if}
+      </div>
     {/each}
   </div>
+
   <p class="p-4 text-2xl">Recently accessed</p>
   <div class="mx-auto grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
-    {#each courseVisits as courseVisit}
-      {#if !courseVisit.favourite}
+    {#each courseVisits.filter((cv) => !cv.favourite) as courseVisit (courseVisit.id)}
+      <div animate:flip={{ duration: 300 }}>
         <CourseVisitCard {courseVisit} {deleteCourse} {starUnstarCourse} />
-      {/if}
+      </div>
     {/each}
   </div>
 </div>

src/routes/(home)/CourseVisitCard.svelte

@@ -1,10 +1,13 @@
 <script>
   import Iconify from "@iconify/svelte";
+  import { cubicIn, cubicOut } from "svelte/easing";
+  import { fade, scale } from "svelte/transition";
 
-  let { courseVisit, deleteCourse, starUnstarCourse } = $props(); // Using prop rune syntax
+  let { courseVisit, deleteCourse, starUnstarCourse } = $props();
 </script>
 
 <div
+  transition:scale|local={{ duration: 300, start: 0.8, easing: cubicOut }}
   class="to-accent-50 dark:to-accent-900 card card-hover from-primary-50 dark:from-primary-900 m-2 border bg-gradient-to-l p-2"
 >
   <div class="flex justify-between">