89 lines
3.5 KiB
PHP
89 lines
3.5 KiB
PHP
|
|
{{-- Profile Reaction Status Badge View --}}
|
|
<div class="profile-reaction-status-badge inline-flex items-center
|
|
@if($size === 'sm') space-x-1 text-xs
|
|
@elseif($size === 'lg') space-x-3 text-base
|
|
@else space-x-2 text-sm @endif"
|
|
wire:poll.30s="loadStatus">
|
|
|
|
{{-- Online Status --}}
|
|
@if($showOnlineStatus)
|
|
<div class="flex items-center
|
|
@if($size === 'sm') space-x-1
|
|
@else space-x-2 @endif">
|
|
|
|
{{-- Status Dot --}}
|
|
<div class="
|
|
@if($size === 'sm') w-1.5 h-1.5
|
|
@elseif($size === 'lg') w-3 h-3
|
|
@else w-2 h-2 @endif
|
|
rounded-full
|
|
@if($isOnline) bg-green-500 animate-pulse
|
|
@else bg-gray-400 @endif">
|
|
</div>
|
|
|
|
{{-- Status Text (unless compact mode) --}}
|
|
@if(!$compactMode)
|
|
<span class="
|
|
@if($isOnline) text-green-600 dark:text-green-400
|
|
@else text-theme-muted dark:text-theme-muted @endif">
|
|
@if($isOnline)
|
|
Online
|
|
@elseif($lastSeen)
|
|
{{ $lastSeen->diffForHumans() }}
|
|
@else
|
|
Offline
|
|
@endif
|
|
</span>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Reactions --}}
|
|
@if($showReactions && count($reactions) > 0)
|
|
<div class="flex items-center
|
|
@if($size === 'sm') space-x-0.5
|
|
@else space-x-1 @endif
|
|
@if($showOnlineStatus)
|
|
@if($size === 'sm') ml-1 pl-1
|
|
@else ml-2 pl-2 @endif
|
|
border-l border-theme-border dark:border-theme-secondary
|
|
@endif">
|
|
|
|
@foreach($reactions as $reaction)
|
|
@if($compactMode)
|
|
{{-- Compact: Just show icons --}}
|
|
<span class="
|
|
@if($size === 'sm') text-xs
|
|
@elseif($size === 'lg') text-lg
|
|
@else text-sm @endif
|
|
{{ $reaction['color'] }}"
|
|
title="{{ $reaction['type'] }}">
|
|
{{ $reaction['icon'] }}
|
|
</span>
|
|
@else
|
|
{{-- Full: Clickable badges --}}
|
|
<button wire:click="toggleReaction('{{ $reaction['type'] }}')"
|
|
class="inline-flex items-center
|
|
@if($size === 'sm') px-1.5 py-0.5 text-xs
|
|
@elseif($size === 'lg') px-3 py-1.5 text-sm
|
|
@else px-2 py-1 text-xs @endif
|
|
rounded-full bg-gray-100 dark:bg-theme-primary hover:bg-gray-200 dark:hover:bg-theme-secondary transition-colors"
|
|
title="Remove {{ $reaction['type'] }}">
|
|
<span class="{{ $reaction['color'] }}
|
|
@if($size === 'sm') text-xs
|
|
@elseif($size === 'lg') text-base
|
|
@else text-sm @endif">
|
|
{{ $reaction['icon'] }}
|
|
</span>
|
|
@if(!$compactMode && $size !== 'sm')
|
|
<span class="ml-1 text-theme-secondary dark:text-theme-muted">
|
|
{{ $reaction['type'] }}
|
|
</span>
|
|
@endif
|
|
</button>
|
|
@endforeach
|
|
@endif
|
|
</div>
|
|
@endif
|
|
</div> |