<script>
    import '../app.css'
    import { App } from 'konsta/svelte'
    import { PageTransitionController, cover } from 'sveltekit-page-transitions'
</script>

<App theme="ios" safeAreas>
    <PageTransitionController transition={cover}>
        <slot />
    </PageTransitionController>
</App>

<script>
    import { Page, Navbar, NavbarBackLink, BlockTitle, List, ListItem } from 'konsta/svelte'
    import { PageTransition } from 'sveltekit-page-transitions'

    const items = Array(20)
        .fill('Item')
        .map((item, index) => `${item} ${index}`)
</script>

<PageTransition>
    <Page>
        <Navbar title="Page 1">
            <NavbarBackLink slot="left" onClick={() => history.back()} />
        </Navbar>
        <BlockTitle>PAGE 1</BlockTitle>
        <List strong outline>
            {#each items as item}
                <ListItem title={item} class="relative hairline-b" />
            {/each}
        </List>
    </Page>
</PageTransition>