Popovers

<div class="h-96">
    <x-lb.element.popover height="max-h-64">
        <x-slot name="trigger">
            <x-lb.element.button.primary>
                Open Popover
            </x-lb.element.button.primary>
        </x-slot>
 
        <x-lb.element.popover.title>
            Account
        </x-lb.element.popover.title>
        <x-lb.element.popover.divider />
        <x-lb.element.popover.item>
            <x-lb.heroicon.o-user-circle class="w-4 h-4 mr-2 text-neutral-500" />
            <span>Profile</span>
        </x-lb.element.popover.item>
        <x-lb.element.popover.item>
            <x-lb.heroicon.o-credit-card class="w-4 h-4 mr-2 text-neutral-500" />
            <span>Billing</span>
        </x-lb.element.popover.item>
        <x-lb.element.popover.item>
            <x-lb.heroicon.o-finger-print class="w-4 h-4 mr-2 text-neutral-500" />
            <span>Seccurity</span>
        </x-lb.element.popover.item>
 
        <x-lb.element.popover.divider />
 
        <x-lb.element.popover.title>
            Projects
        </x-lb.element.popover.title>
        <x-lb.element.popover.item>
            <div class="h-2 w-2 rounded-lg bg-indigo-500 mr-2"></div>
            <span>LaraBlade</span>
        </x-lb.element.popover.item>
        <x-lb.element.popover.item>
            <div class="h-2 w-2 rounded-lg bg-orange-500 mr-2"></div>
            <span>LaraBlade</span>
        </x-lb.element.popover.item>
        <x-lb.element.popover.item>
            <div class="h-2 w-2 rounded-lg bg-emerald-500 mr-2"></div>
            <span>LaraBlade</span>
        </x-lb.element.popover.item>
        <x-lb.element.popover.item>
            <div class="h-2 w-2 rounded-lg bg-red-500 mr-2"></div>
            <span>LaraBlade</span>
        </x-lb.element.popover.item>
        <x-lb.element.popover.item>
            <div class="h-2 w-2 rounded-lg bg-blue-500 mr-2"></div>
            <span>LaraBlade</span>
        </x-lb.element.popover.item>
 
    </x-lb.element.popover>
</div>

@props([
    'rounded' => 'md',
    'position' => 'top-0 w-64 mt-10 left-0',
    'height' => ' max-h-96',
])
 
@php
    $roundedClass = 'rounded-' . $rounded;
@endphp
 
<div x-data="{
    dropdownOpen: false
}" class="relative">
 
    @isset($trigger)
        <div @click="dropdownOpen=true">
            {{ $trigger }}
        </div>
    @endisset
 
    <div x-show="dropdownOpen" @click.away="dropdownOpen=false" x-transition:enter="ease-out duration-200"
        x-transition:enter-start="-translate-y-2" x-transition:enter-end="translate-y-0"
        class="absolute z-50 {{ $position }}" style="display:none">
        <div
            class="bg-white border border-neutral-200 shadow-md scrollbar-active overflow-y-auto {{ $roundedClass }} {{ $height }}">
            {{ $slot }}
        </div>
    </div>
</div>

<h3 class="text-sm uppercase font-bold mt-2 px-4 text-neutral-900">
    {{ $slot }}
</h3>

<div>
    <div class="py-2">
        <div class="border-t border-neutral-200"></div>
    </div>
</div>

<div {{ $attributes }}
    class="relative flex cursor-default select-none hover:bg-neutral-100 items-center rounded px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 mx-2 my-1">
    {{ $slot }}
</div>