<script lang="ts">
    import {createEventDispatcher} from "svelte";

    let dragover = false;

    function handleDragOver(e) {
        e.preventDefault();
        dragover = true;
    }

    const dispatch = createEventDispatcher();

    function handleDrop(ev: DragEvent) {
        ev.preventDefault();
        dragover = false;
        dispatch('drop', ev)
    }
</script>

<div class="w-56 bg-gray-800 p-4 rounded" class:border={dragover} class:m-px={!dragover} on:drop={handleDrop} on:dragover={handleDragOver} on:dragleave={() => dragover = false}>
    <slot></slot>
</div>

<style>
    div {
        min-height: 14rem;
    }
</style>
