<template>
    <Menu as="div" class="relative inline-block text-left">
        <slot name="button" />
        <Transition enter="transition ease-out duration-100" enter-from="transform opacity-0 scale-95"
            enter-to="transform opacity-100 scale-100" leave="transition ease-in duration-75"
            leave-from="transform opacity-100 scale-100" leave-to="transform opacity-0 scale-95">
            <MenuItems
                class="absolute right-0 z-30 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none dark:bg-dark dark:text-white">
                <slot />
            </MenuItems>
        </Transition>
    </Menu>
</template>

<script setup lang="ts">
import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/vue'
</script>