import VirtualList from './VirtualList.svelte';

//import VirtualList from '@sveltejs/svelte-virtual-list@3.0.0-alpha.1';

import items from './data.js';

let start;

let end;

function updateContent(item) {

const index = $items.indexOf(item)

$items = [

...$items.slice(0, index),

{ ...item, content: 'updated content' },

...$items.slice(index + 1)

]

}

</script>

<h1>Virtual list</h1>

<p>Instead of rendering all your data, &lt;VirtualList&gt; just renders the bits that are visible, keeping your page nice and light.</p>

<p>The source code for the component is <a href='https://github.com/sveltejs/svelte-virtual-list'>here</a>.</p>

<div class='container'>

<VirtualList items={$items} let:item bind:start bind:end>

<div class='card'>

<span class='avatar' style='background: url({item.avatar})' ></span>

<h2>{item.name}</h2>

<p>{item.content}</p>

<button on:click={() => updateContent(item)}>update content</button>

</div>

</VirtualList>

<p>showing items {start}-{end}</p>

</div>

<style>