<script>
import Tab from 'svelte-tabs-scrollable/Tab.svelte';
import Tabs from 'svelte-tabs-scrollable/Tabs.svelte';
export let isLeftArrowDisapled;
export let isRightArrowDisapled;
let onLeftBtnClick;
let onRightBtnClick;
let activeTab = 10;
</script>
<Tabs
didReachEnd={(val) => (isRightArrowDisapled = val)}
didReachStart={(val) => (isLeftArrowDisapled = val)}
bind:onLeftBtnClick
bind:onRightBtnClick
{activeTab}
>
{#each [...Array(33).keys()] as item}
<Tab>
tabs
{item}
</Tab>
{/each}
</Tabs>
<div class="row">
<div class="col-md-6 d-flex">
<button class="flex-fill btn rn___btn" disabled={isLeftArrowDisapled} on:click={onLeftBtnClick}>
Click me to move tabs to left
</button>
</div>
<div class="col-md-6 d-flex">
<button
class="flex-fill btn rn___btn mt-md-0 mt-2"
disabled={isRightArrowDisapled}