Help with svelte component in astro

---


import { main ,loadMoreEpisodes } from '../../utils/app.js';
import NextButton from '../../components/NextButton.svelte'


export async function getStaticPaths({paginate}){
    const episodes = await main()
    return paginate(episodes, { pageSize: 20 });
}
const { page } = Astro.props;

---

<Layout title="Episodes" > 
    <div class="bg-slate-900">
        <Navbar /> 
        <h1 class="">
            <span class="">
               Browse Episodes 
            </span>
        </h1>
        <h1>Page {page.currentPage}</h1>
       
        
       
        <NextButton />
        <button this-one>CLick this</button>

            <div class="text-white mx-auto"> 
            {page.data.map(episode => (
                    <EpisodeCard 
                    href={`/episodes/${episode.id}`} 
                    title={episode.name} 
                    body={episode.description.slice(0,145)+'...'}
                    img={episode.images[0].url}/>
            ))     
            }     
           
            
            </div>
            
</Layout> 

<script>

    import { main, fetchNextEpisodes } from "../../utils/app";
    console.log("page rendereed");
    const buttons = document.querySelector("[this-one]")
    buttons.addEventListener('click',()=>fetchNextEpisodes());

</script>

<script>

import {fetchNextEpisodes} from '../utils/app.js';
async function handleClick(){
  await fetchNextEpisodes();
}

</script>
<button class="primary" on:click={handleClick}>Next ep</button>