@props(['align' => 'right'])
<div x-data="{ open: false }" class="relative">
    <div @click="open = !open">{{ $trigger }}</div>
    <div
        x-show="open"
        x-cloak
        @click.outside="open = false"
        x-transition
        class="absolute z-50 mt-2 min-w-[10rem] rounded-xl border border-slate-200 bg-white py-2 shadow-lg"
        :class="{ 'right-0': '{{ $align }}' === 'right', 'left-0': '{{ $align }}' === 'left' }"
    >
        {{ $slot }}
    </div>
</div>