<script lang="ts">
    export let callback = (direction: number) => {
        console.log(direction);
    }
</script>

<main>
    <button on:click={()=>{callback(0)}}>UP</button>
    <button on:click={()=>{callback(3)}}>LEFT</button>
    <button on:click={()=>{callback(2)}}>DOWN</button>
    <button on:click={()=>{callback(1)}}>RIGHT</button>
</main>

<style lang="scss">
    main{
        margin: 1em 0;
        width: 100%;
        display: flex;
        gap: .25em;
    }
    button{
        flex: 1;
        height: 50px;
    }
</style>