make <script> svelte 5

packages/ui/src/components/molecule/comment/comment.svelte

@@ -1,16 +1,12 @@
 <script>
   import { ThumbsUp, ThumbsDown, Star } from 'lucide-svelte'
 
-  export let content
-  export let semester
-  export let rating
-  export let likesCount
-  export let dislikesCount
+  let { content, semester, rating, likesCount, dislikesCount } = $props()
   // Calculate the number of filled and unfilled stars
   const totalStars = 5
-  const filledStars = Math.floor(rating) // Number of fully filled stars
-  const hasHalfStar = rating % 1 !== 0 // Determine if there's a half star
-  const emptyStars = totalStars - filledStars - (hasHalfStar ? 1 : 0)
+  let filledStars = $derived(Math.floor(rating)) // Number of fully filled stars
+  let hasHalfStar = $derived(rating % 1 !== 0) // Determine if there's a half star
+  let emptyStars = $derived(totalStars - filledStars - (hasHalfStar ? 1 : 0))
 </script>
 
 <div