RomhackPlaza/resources/views/components/hovercard.blade.php

<div
    x-data
    x-show="$store.hovercard.start"
    x-cloak
    class="hovercard-overlay hovercard"
    :style="{ left: $store.hovercard.x + 'px', top: $store.hovercard.y + 'px' }"
    @mouseleave="$store.hovercard.close()"
    @keydown.escape.window="$store.hovercard.close()"
>

    <template x-if="$store.hovercard.loading">
        <div class="hovercard-overlay-loading">
            <i data-lucide="loader-2" class="spin"></i>
        </div>
    </template>

    <template x-if="$store.hovercard.error">
        <div class="hovercard-overlay-error">
            <i data-lucide="alert-circle"></i>
            <p>Failed to load profile.</p>
        </div>
    </template>

    <template x-if="$store.hovercard.data && !$store.hovercard.loading && !$store.hovercard.error">
        <div>
            <div class="hovercard-header">
                <div
                    class="hovercard-avatar"
                    :style="$store.hovercard.data.avatar_url === null
            ? { background: $store.hovercard.data.avatar_color }
            : {}"
                >
                    <template x-if="$store.hovercard.data.avatar_url !== null">
                        <img :src="$store.hovercard.data.avatar_url" alt="avatar">
                    </template>
                    <template x-if="$store.hovercard.data.avatar_url === null">
                        <span x-text="$store.hovercard.data.avatar_letter"></span>
                    </template>
                </div>
            </div>

        <div class="hovercard-body">
            <div class="hovercard-username" x-text="$store.hovercard.data.username"></div>
            <div class="hovercard-title" x-text="$store.hovercard.data.group_name"></div>

            <div class="hovercard-stats">
                <div class="hovercard-stat">
                    <span class="stat-value" x-text="$store.hovercard.data.message_count"></span>
                    <span class="stat-label">Messages</span>
                </div>
                <div class="hovercard-stat">
                    <span class="stat-value" x-text="$store.hovercard.data.reaction_score"></span>
                    <span class="stat-label">Reactions</span>
                </div>
                <div class="hovercard-stat">
                    <span class="stat-value" x-text="$store.hovercard.data.trophy_points"></span>
                    <span class="stat-label">Points</span>
                </div>
                <div class="hovercard-stat">
                    <span class="stat-value" x-text="$store.hovercard.data.entries_count"></span>
                    <span class="stat-label">Entries</span>
                </div>
            </div>

            <div class="hovercard-actions">
                <a :href="`{{ xfRoute('members') }}/${$store.hovercard.data.user_id}/`" class="btn" title="View profile">
                    <i data-lucide="user" size="14"></i>
                </a>
                <a :href="`{{ xfRoute('direct-messages/add') }}?to=${$store.hovercard.data.username.replace(' ', '+')}`" class="btn" title="Send message">
                    <i data-lucide="mail" size="14"></i>
                </a>
            </div>
        </div>
        </div>
    </template>
</div>