|
| 1 | +<div class="flex items-center gap-1"> |
| 2 | + {{-- Existing Reactions Display (clickable to toggle) --}} |
| 3 | + @foreach($reactionCounts as $type => $count) |
| 4 | + @if($count > 0) |
| 5 | + <button |
| 6 | + wire:click="toggleReaction('{{ $type }}')" |
| 7 | + @class([ |
| 8 | + 'flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-sm transition-colors border', |
| 9 | + 'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-900 dark:text-blue-300 dark:border-blue-700' => in_array($type, $userReactions), |
| 10 | + 'hover:bg-gray-100 text-gray-600 border-gray-200 dark:hover:bg-gray-700 dark:text-gray-400 dark:border-gray-600' => !in_array($type, $userReactions), |
| 11 | + ]) |
| 12 | + @auth |
| 13 | + x-tooltip.raw="{{ $availableReactions[$type] ?? $type }}" |
| 14 | + @else |
| 15 | + disabled |
| 16 | + x-tooltip.raw="{{ __('filament-forum::filament-forum.comments.login-to-react') }}" |
| 17 | + @endauth |
| 18 | + > |
| 19 | + <span>{{ $type }}</span> |
| 20 | + <span class="text-xs font-medium">{{ $count }}</span> |
| 21 | + </button> |
| 22 | + @endif |
| 23 | + @endforeach |
| 24 | + |
| 25 | + {{-- Smiley icon to open reaction picker --}} |
| 26 | + <div class="relative" x-data="{ open: @entangle('showReactionPicker') }" x-on:click.outside="open = false"> |
| 27 | + @auth |
| 28 | + <button |
| 29 | + wire:click="toggleReactionPicker" |
| 30 | + class="flex items-center justify-center w-7 h-7 rounded-full transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300" |
| 31 | + x-tooltip.raw="{{ __('filament-forum::filament-forum.comments.add-reaction') }}" |
| 32 | + > |
| 33 | + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="w-5 h-5"> |
| 34 | + <path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z" /> |
| 35 | + </svg> |
| 36 | + </button> |
| 37 | + |
| 38 | + {{-- Reaction Picker --}} |
| 39 | + <div x-show="open" |
| 40 | + x-transition:enter="transition ease-out duration-100" |
| 41 | + x-transition:enter-start="transform opacity-0 scale-95" |
| 42 | + x-transition:enter-end="transform opacity-100 scale-100" |
| 43 | + x-transition:leave="transition ease-in duration-75" |
| 44 | + x-transition:leave-start="transform opacity-100 scale-100" |
| 45 | + x-transition:leave-end="transform opacity-0 scale-95" |
| 46 | + class="absolute bottom-full right-0 mb-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg p-2 z-10"> |
| 47 | + <div class="flex space-x-1"> |
| 48 | + @foreach($availableReactions as $emoji => $label) |
| 49 | + <button |
| 50 | + wire:click="toggleReaction('{{ $emoji }}')" |
| 51 | + class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" |
| 52 | + x-tooltip.raw="{{ $label }}" |
| 53 | + > |
| 54 | + <span class="text-lg">{{ $emoji }}</span> |
| 55 | + </button> |
| 56 | + @endforeach |
| 57 | + </div> |
| 58 | + </div> |
| 59 | + @else |
| 60 | + <button |
| 61 | + disabled |
| 62 | + class="flex items-center justify-center w-7 h-7 rounded-full text-gray-300 cursor-not-allowed dark:text-gray-600" |
| 63 | + x-tooltip.raw="{{ __('filament-forum::filament-forum.comments.login-to-react') }}" |
| 64 | + > |
| 65 | + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="w-5 h-5"> |
| 66 | + <path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z" /> |
| 67 | + </svg> |
| 68 | + </button> |
| 69 | + @endauth |
| 70 | + </div> |
| 71 | +</div> |
0 commit comments