refactor: migrate to Svelte 5

use runes ($props, $state, $derived, $effect, etc)

apps/website/src/components/organisms/PostersGrid/PostersGrid.svelte

@@ -3,19 +3,23 @@
 </style>
 
 <script lang="ts">
-    import { getContext, onMount } from 'svelte'
+    import { getContext } from 'svelte'
     import EmblaCarousel, { type EmblaCarouselType } from 'embla-carousel'
     // Components
     import Poster from '$components/molecules/Poster/Poster.svelte'
     import { debounce } from 'utils/actions'
 
-    export let posters: any = []
+    let {
+        posters,
+    }: {
+        posters: any[]
+    } = $props()
 
-    let innerWidth: number
-    let carouselEl: HTMLElement
-    let carousel: EmblaCarouselType
-    let currentSlide = 0
-    let carouselDots = []
+    let innerWidth = $state<number>()
+    let carouselEl = $state<HTMLElement>()
+    let carousel = $state<EmblaCarouselType>()
+    let currentSlide = $state(0)
+    let carouselDots = $state([])
 
     const { shopProducts }: any = getContext('shop')
 
@@ -72,7 +76,7 @@
     const handleResize = debounce(initCarousel, 200)
 
 
-    onMount(() => {
+    $effect(() => {
         if (innerWidth < 1200) {
             initCarousel()
         }
@@ -88,7 +92,7 @@
 
 <svelte:window
     bind:innerWidth
-    on:resize={handleResize}
+    onresize={handleResize}
 />
 
 <section class="shop-page__posters grid">
@@ -110,7 +114,7 @@
                 <ul class="set__dots">
                     {#each carouselDots as _, index}
                         <li class:is-active={index === currentSlide}>
-                            <button on:click={() => goToSlide(index)} aria-label="Go to slide #{index + 1}" />
+                            <button onclick={() => goToSlide(index)} aria-label="Go to slide #{index + 1}"></button>
                         </li>
                     {/each}
                 </ul>