82 lines
4.5 KiB
PHP
82 lines
4.5 KiB
PHP
<div class="bg-gray-100/50 backdrop-blur-sm border border-gray-700/50 rounded-xl shadow-xl mb-8">
|
|
<!-- Tab Navigation -->
|
|
<div class="border-b border-gray-100/50">
|
|
<nav class="flex space-x-8 px-6" role="tablist">
|
|
@foreach($tabs as $key => $tab)
|
|
<button
|
|
wire:click="setActiveTab('{{ $key }}')"
|
|
class="py-4 px-1 border-b-2 font-semibold text-sm transition-all duration-300 {{ $activeTab === $key ? 'border-blue-500 text-blue-400' : 'border-transparent hover:border-gray-600' }}"
|
|
role="tab"
|
|
aria-selected="{{ $activeTab === $key ? 'true' : 'false' }}"
|
|
>
|
|
@if(isset($tab['icon']))
|
|
<i class="{{ $tab['icon'] }} mr-2"></i>
|
|
@endif
|
|
{{ $tab['label'] }}
|
|
</button>
|
|
@endforeach
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Tab Content -->
|
|
<div class="p-8">
|
|
@if($activeTab === 'overview')
|
|
<!-- Overview Tab Content -->
|
|
<div class="space-y-6">
|
|
<div>
|
|
<h3 class="text-xl font-bold bg-gradient-to-r from-white to-gray-300 bg-clip-text mb-6">
|
|
<i class="ri-bar-chart-line"></i> Profile Statistics
|
|
</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="bg-gradient-to-br from-blue-500/10 to-purple-500/10 border border-blue-500/20 p-6 rounded-xl hover:scale-105 transition-transform duration-300">
|
|
<div class="text-3xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text ">
|
|
{{ $profile->stats['comments_count'] }}
|
|
</div>
|
|
<div class="text-sm mt-2"><i class="ri-chat-3-line mr-1"></i>Profile Comments</div>
|
|
</div>
|
|
<div class="bg-gradient-to-br from-green-500/10 to-blue-500/10 border border-green-500/20 p-6 rounded-xl hover:scale-105 transition-transform duration-300">
|
|
<div class="text-lg font-bold bg-gradient-to-r from-green-400 to-blue-400 bg-clip-text ">
|
|
{{ $profile->user->created_at->format('F j, Y') }}
|
|
</div>
|
|
<div class="text-sm mt-2"><i class="ri-calendar-line mr-1"></i>Member Since</div>
|
|
</div>
|
|
<div class="bg-gradient-to-br from-purple-500/10 to-pink-500/10 border border-purple-500/20 p-6 rounded-xl hover:scale-105 transition-transform duration-300">
|
|
<div class="text-2xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text ">
|
|
{{ $profile->is_public ? 'Public' : 'Private' }}
|
|
</div>
|
|
<div class="text-sm mt-2"><i class="ri-eye-line mr-1"></i>Profile Visibility</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@if($profile->bio)
|
|
<div class="bg-gray-700/30 p-6 rounded-xl border border-gray-600/50">
|
|
<h3 class="text-lg font-bold mb-3"><i class="ri-information-line mr-2"></i>About</h3>
|
|
<p class="leading-relaxed">{{ $profile->bio }}</p>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="bg-gray-700/30 p-6 rounded-xl border border-gray-600/50">
|
|
<h3 class="text-lg font-bold mb-3"><i class="ri-time-line mr-2"></i>Recent Activity</h3>
|
|
<p class="">No recent activity to display.</p>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<!-- Extension Tab Content -->
|
|
<div>
|
|
@if($activeTabContent)
|
|
{!! $activeTabContent !!}
|
|
@else
|
|
<div class="text-center py-12">
|
|
<div class="w-24 h-24 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<i class="ri-file-text-line text-5xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">No Content Available</h3>
|
|
<p class="">There's no content to display for this tab yet.</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|