<script setup>
import { MenuItem } from "@headlessui/vue";
</script>

<template>
    <MenuItem v-slot="{ active }"
        ><a
            href="#"
            class="block w-full items-center rounded-md py-2 border border-zinc-900 block w-full pl-3 pr-4 py-2 text-left text-base font-medium text-gray-600 dark:text-zinc-100 hover:border-sky-500 dark:hover:border-sky-600 hover:ring-sky-500 dark:hover:ring-sky-600transition duration-150 ease-in-out"
        >
            Upload Folder
            <input
                @change="upload"
                type="file"
                id="file"
                class="absolute left-0 top-0 bottom-0 right-0 opacity-0"
                multiple
                directory
                webkitdirectory
            />
            <label
                for="file"
                class="opacity-0 absolute left-0 top-0 bottom-0 right-0 cursor-pointer"
            ></label>
        </a>
    </MenuItem>
</template>
