]> git.localhorst.tv Git - alttp.git/blob - resources/views/components/dropdown.blade.php
chat bot settings
[alttp.git] / resources / views / components / dropdown.blade.php
1 @props(['align' => 'right', 'width' => '48', 'contentClasses' => 'py-1 bg-white'])
2
3 @php
4 switch ($align) {
5     case 'left':
6         $alignmentClasses = 'origin-top-left left-0';
7         break;
8     case 'top':
9         $alignmentClasses = 'origin-top';
10         break;
11     case 'right':
12     default:
13         $alignmentClasses = 'origin-top-right right-0';
14         break;
15 }
16
17 switch ($width) {
18     case '48':
19         $width = 'w-48';
20         break;
21 }
22 @endphp
23
24 <div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
25     <div @click="open = ! open">
26         {{ $trigger }}
27     </div>
28
29     <div x-show="open"
30             x-transition:enter="transition ease-out duration-200"
31             x-transition:enter-start="transform opacity-0 scale-95"
32             x-transition:enter-end="transform opacity-100 scale-100"
33             x-transition:leave="transition ease-in duration-75"
34             x-transition:leave-start="transform opacity-100 scale-100"
35             x-transition:leave-end="transform opacity-0 scale-95"
36             class="absolute z-50 mt-2 {{ $width }} rounded-md shadow-lg {{ $alignmentClasses }}"
37             style="display: none;"
38             @click="open = false">
39         <div class="rounded-md ring-1 ring-black ring-opacity-5 {{ $contentClasses }}">
40             {{ $content }}
41         </div>
42     </div>
43 </div>