<script>
    import { onMount } from "svelte";
    const url ="https://huggingface.co/datasets/triple-t/dummy/raw/main/stabilityai_stable-diffusion.json"

    let discussions = [];
    function fetchData(){
        fetch(url)
        .then(response => response.json())
        .then(json => {
            discussions = json;
        })  
    }
    onMount(()=>{
        fetchData();
        const interval = window.setInterval(fetchData, 2000);
		return () => {
			clearInterval(interval);
		};
    })
</script>



<div class="grid grid-cols-1 gap-4 p-3 ">
    <h1 class="text-3xl text-black dark:text-white font-semibold p-2 text-center">Show off</h1>
</div>
<div class="grid grid-cols-4 gap-4 p-3">
        {#each discussions as item}
        {#if item.data.images.length > 0}
            <div>
                <h1 class="text-black dark:text-white font-semibold p-2 min-h-[8ch] text-center">{item.data.prompt}</h1>
                <!-- svelte-ignore a11y-missing-attribute -->
                <img loading="lazy" src={item.data.images[0]} class="rounded-3xl"/>
            </div>
        {/if}
        {/each}
        
  </div>