57 lines
2.0 KiB
PHP
57 lines
2.0 KiB
PHP
@props([
|
|
'reactions' => [],
|
|
'commentId' => 0,
|
|
'userReactions' => []
|
|
])
|
|
|
|
@php
|
|
$emojiMap = [
|
|
'like' => '👍',
|
|
'love' => '❤️',
|
|
'celebrate' => '🎉',
|
|
'funny' => '😄',
|
|
'interesting' => '🤔',
|
|
'support' => '💯',
|
|
'sad' => '😥',
|
|
'anger' => '😡',
|
|
];
|
|
@endphp
|
|
|
|
<span class="comment-reactions" id="reactions-{{ $commentId }}">
|
|
@if(count($reactions) > 0)
|
|
<span class="reaction-list">
|
|
@foreach($reactions as $reactionData)
|
|
@php
|
|
$reactionKey = $reactionData['reaction'];
|
|
$emoji = $emojiMap[$reactionKey] ?? $reactionKey;
|
|
$isActive = in_array($reactionKey, $userReactions);
|
|
$userNames = [];
|
|
if (!empty($reactionData['users'])) {
|
|
foreach ($reactionData['users'] as $user) {
|
|
$userNames[] = $user['name'];
|
|
}
|
|
}
|
|
$tooltip = implode(', ', $userNames);
|
|
@endphp
|
|
<button type="button"
|
|
class="reaction-btn {{ $isActive ? 'active' : '' }}"
|
|
title="{{ $tooltip }}"
|
|
hx-post="{{ BASE_URL }}/hx/comments/reactions/toggle?commentId={{ $commentId }}"
|
|
hx-vals='{"reaction": "{{ $reactionKey }}"}'
|
|
hx-target="#reactions-{{ $commentId }}"
|
|
hx-swap="outerHTML">
|
|
<span class="reaction-emoji">{{ $emoji }}</span>
|
|
<span class="reaction-count">{{ $reactionData['reactionCount'] }}</span>
|
|
</button>
|
|
@endforeach
|
|
</span>
|
|
@endif
|
|
|
|
<span class="reaction-picker-toggle">
|
|
<button type="button" class="add-reaction-btn" onclick="toggleReactionPicker(this, {{ $commentId }})">
|
|
<i class="fa fa-smile-o"></i>
|
|
<span class="sr-only">Add reaction</span>
|
|
</button>
|
|
</span>
|
|
</span>
|