Atomcms-edit/resources/themes/atom/views/user/profile.blade.php

<x-app-layout>
 @push('title', $user->username)

 <div class="col-span-12">
 <div class="grid grid-cols-1! gap-y-14">
 <div class="grid grid-cols-3! gap-x-8">
 <div
 class="col-span-3 md:col-span-1! h-[150px] lg:h-[220px] profile-bg rounded-lg relative flex gap-x-2 items-center overflow-hidden"
 style="color: var(--color-text)">
 <img class="mt-14 lg:mt-0" style="image-rendering: pixelated;"
 src="{{ setting('avatar_imager') }}{{ $user->look }}&direction=2&head_direction=3&gesture=sml&action=wav&size=l"
 alt="">

 <div class="flex flex-col">
 <h3 class="text-xl font-semibold" style="color: var(--color-text-muted)">{{ __('My name is,') }}</h3>
 <h2 class="text-4xl">
 {{ $user->username }}
 </h2>

<h4 class="text-lg font-semibold italic" style="color: var(--color-text-muted)">{{ $user->motto }}</h4>
   @if(isset($showOnline) && $showOnline)
   <small class="text-xs mt-1 opacity-70">{{ __('Last online:') }} {{ $lastLogin ?? 'Unknown' }}</small>
   @endif
  </div>
  </div>

  @if(isset($showStats) && $showStats)
  <div class="mt-4 flex flex-wrap gap-4 p-3 rounded-lg" style="background: var(--color-surface)">
   <div class="flex items-center gap-2">
    <svg class="w-4 h-4" style="color: var(--color-primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
    </svg>
    <span class="text-sm" style="color: var(--color-text-muted)">{{ __('Account:') }}</span>
    <span class="font-semibold" style="color: var(--color-primary)">{{ $accountAge ?? 'Unknown' }}</span>
   </div>
   <div class="flex items-center gap-2">
    <svg class="w-4 h-4 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
    </svg>
    <span class="text-sm" style="color: var(--color-text-muted)">{{ __('Friends:') }}</span>
    <span class="font-semibold text-blue-400">{{ $totalFriends ?? 0 }}</span>
   </div>
   <div class="flex items-center gap-2">
    <svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
    </svg>
    <span class="text-sm" style="color: var(--color-text-muted)">{{ __('Guilds:') }}</span>
    <span class="font-semibold text-purple-400">{{ $totalGuilds ?? 0 }}</span>
   </div>
  </div>
  @endif

 <div
 class="col-span-3! mt-4 grid w-full grid-cols-1 space-y-3 md:space-y-0 md:col-span-2! md:mt-0 md:grid-cols-3">
 <div
 class="rounded-lg md:rounded-none md:rounded-l-lg bg-[#f8ef2b] flex flex-col gap-y-2 items-center justify-center py-3 md:py-0">
 <img src="{{ asset('/assets/images/profile/credits.png') }}" alt="">

 <h4 class="text-[#b16d18] font-semibold text-2xl">
 {{ $user->credits }}
 </h4>
 </div>

 <div
 class="rounded-lg md:rounded-none bg-[#e99bdc] flex flex-col gap-y-2 items-center justify-center py-3 md:py-0">
 <img src="{{ asset('/assets/images/profile/duckets.png') }}" alt="">

 <h4 class="text-[#812378] font-semibold text-2xl">
 {{ $user->currency('duckets') }}
 </h4>
 </div>

 <div
 class="rounded-lg md:rounded-none md:rounded-r-lg! bg-[#82d6db] flex flex-col gap-y-2 items-center justify-center py-3 md:py-0">
 <img src="{{ asset('/assets/images/profile/diamonds.png') }}" alt="">

 <h4 class="text-[#146867] font-semibold text-2xl">
 {{ $user->currency('diamonds') }}
 </h4>
 </div>
 </div>
 </div>

 <div class="grid gap-14 grid-cols-1 md:grid-cols-2">
 <div class="col-span-1">
 <x-user.profile-info-card col-span="1">
 <x-slot:image>
 <img class="h-[140px] object-cover object-left" src="{{ asset('/assets/images/profile/badges.png') }}" alt="">
 </x-slot:image>

 <x-slot:title>
 {{ __('Badges') }}
 </x-slot:title>

 <div class="flex flex-wrap gap-2 justify-between">
 @forelse($badges as $badge)
 <div data-tippy-content="{{ $badge->badge_code }}"
 class="user-badge h-[70px] w-[70px] border-2 dark:border-gray-700 rounded-full flex items-center justify-center cursor-pointer">
 <img src="{{ setting('badges_path') }}/{{ $badge->badge_code }}.gif"
 class="max-h-[55px] max-w-[55px]" alt="">
 </div>
 @empty
 <div class="col-span-4">
 {{ __('It seems like :user has no badges.', ['user' => $user->username]) }}
 </div>
 @endforelse
 </div>
 </x-user.profile-info-card>
 </div>

 <div class="col-span-1">
 <x-user.profile-info-card col-span="1">
 <x-slot:image>
 <img class="h-[140px] object-cover object-left" src="{{ asset('/assets/images/profile/groups.png') }}" alt="">
 </x-slot:image>

 <x-slot:title>
 {{ __('Groups') }}
 </x-slot:title>

 <div class="flex flex-wrap gap-4 justify-between">
 @forelse($groups as $group)
 <div class="h-[70px] w-[70px] rounded-full border-2 dark:border-gray-700 overflow-hidden flex items-center justify-center p-1 rounded-md cursor-pointer friend"
 data-tippy-content="{{ $group->name ?? 'Unknown' }}">
 <img src="{{ setting('group_badge_path') }}/{{ $group->badge }}.png"
 alt="">
 </div>
 @empty
 <div class="w-full">
 {{ __('It seems like :user is not a member of any groups.', ['user' => $user->username]) }}

 </div>
 @endforelse
 </div>
 </x-user.profile-info-card>
 </div>
 </div>

 <div class="grid gap-14 grid-cols-1 md:grid-cols-2">
 <div class="col-span-1">
 <x-user.profile-info-card col-span="1">
 <x-slot:image>
 <img class="h-[140px] object-cover object-left" src="{{ asset('/assets/images/profile/rooms.png') }}" alt="">
 </x-slot:image>

 <x-slot:title>
 {{ __('Rooms') }}
 </x-slot:title>

 <div class="grid grid-cols-2 md:grid-cols-4 gap-4 space-x-1">
 @forelse($user->rooms as $room)
 <div
 class="flex flex-col gap-y-1 rounded-md bg-[var(--color-surface)] p-1 overflow-hidden">
 <div class="h-full inline-block">
 <div class="h-full relative border border-gray-500 dark:border-gray-700 rounded flex items-center justify-center flex-col">
 <img
 class="rounded mt-1 mb-1"
 src="{{ setting('room_thumbnail_path') }}/{{ $room->id }}.png"
 alt="{{ $room->name }}"
 onerror="this.onerror=null;this.src='{{ asset('/assets/images/profile/room_placeholder.png') }}';"
 >

 <div class="absolute bottom-1 left-1/2 transform -translate-x-1/2">
 <div class="{{ $room->users > 0 ? 'bg-[#00800B]' : 'bg-[var(--color-text-muted)]' }} px-1 py-[1px] font-semibold rounded flex gap-x-[3px] text-[var(--color-text)] items-center text-xs">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-[12px]" viewBox="0 0 20 20" fill="currentColor">
 <path
 fill-rule="evenodd"
 d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
 clip-rule="evenodd"
 />
 </svg>

 {{ $room->users }}
 </div>
 </div>
 </div>
 </div>

 <div class="flex items-center justify-between px-1">
 <p class="truncate">{{ Str::limit($room->name, 6) }}</p>

 <a href="#">
 <svg xmlns="http://www.w3.org/2000/svg"
 class="h-5 w-5 text-cyan-300 hover:text-cyan-400"
 viewBox="0 0 20 20" fill="currentColor">
 <path fill-rule="evenodd"
 d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
 clip-rule="evenodd" />
 </svg>
 </a>
 </div>
 </div>
 @empty
 <div class="col-span-4">
 {{ __('It seems like :user got no rooms.', ['user' => $user->username]) }}
 </div>
 @endforelse
 </div>
 </x-user.profile-info-card>
 </div>

 <div class="col-span-1">
 <x-user.profile-info-card col-span="1">
 <x-slot:image>
 <img class="h-[140px] object-cover object-left" src="{{ asset('/assets/images/profile/friends.png') }}" alt="">
 </x-slot:image>

 <x-slot:title>
 {{ __('Friends') }}
 </x-slot:title>

 <div class="grid grid-cols-4 gap-2 xl:grid-cols-6 xl:pl-3">
 @forelse($friends as $friend)
 <a href="{{ route('profile.show', $friend->user->username ?? 'SystemAccount') }}"
 class="h-[70px] w-[70px] rounded-full border-2 dark:border-gray-700 overflow-hidden flex items-center p-1 rounded-md cursor-pointer friend"
 data-tippy-content="{{ $friend->user->username ?? 'Unknown' }}">
 <img class="mt-6 transition duration-200 ease-in-out hover:scale-110 min-w-[64px] h-[110px] -ml-1"
 src="{{ setting('avatar_imager') }}{{ $friend->user?->look }}"
 alt="">
 </a>
 @empty
 <div class="col-span-6">
 {{ __('It seems like :user has no friends.', ['user' => $user->username]) }}
 </div>
 @endforelse
 </div>
 </x-user.profile-info-card>
 </div>
 </div>
 </div>
 </div>

 @push('javascript')
 <script type="module">
 tippy('.user-badge');
 tippy('.friend');
 tippy('.group');
 </script>
 @endpush
</x-app-layout>