File manager - Edit - /var/www/ratemypay/resources/views/components/network/community-card.blade.php
Back
@props(['community']) <div x-data="{ isJoined: {{ $community->isJoined ? 'true' : 'false' }}, isLoading: false, async joinCommunity() { this.isLoading = true; try { const response = await fetch('{{ route('communities.join', $community->id) }}', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' } }); if (response.ok) { this.isJoined = true; // Optional: You can emit an event here to update global counters // window.dispatchEvent(new CustomEvent('community-joined')); } } catch (error) { console.error('Join failed:', error); } finally { this.isLoading = false; } } }" class="bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col h-full" > {{-- Cover / Header --}} <div class="h-24 bg-gradient-to-r from-[#2F3D7E] to-[#4a5bb5] relative shrink-0"> <div class="absolute -bottom-6 left-4"> <div class="w-12 h-12 bg-white rounded-xl border-2 border-white shadow-sm flex items-center justify-center overflow-hidden"> @if(!empty($community->imageUrl)) <img src="{{ $community->imageUrl }}" alt="{{ $community->name }}" class="w-full h-full object-cover"> @else <div class="bg-blue-50 w-full h-full flex items-center justify-center text-[#2F3D7E] font-bold text-xl"> {{ substr($community->name, 0, 1) }} </div> @endif </div> </div> </div> <div class="pt-8 px-4 pb-4 flex-1 flex flex-col"> <div class="flex justify-between items-start mb-2"> <div class="min-w-0 flex-1 mr-2"> <h3 class="font-bold text-gray-900 text-lg leading-tight mb-1 truncate">{{ $community->name }}</h3> <div class="flex items-center gap-2 text-xs text-gray-500"> <span class="flex items-center gap-1"> {{-- Users Icon --}} <svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg> {{ number_format($community->members_count ?? $community->members) }} members </span> @if(!empty($community->location)) <span class="flex items-center gap-1 truncate"> {{-- MapPin Icon --}} <svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg> {{ $community->location }} </span> @endif </div> </div> {{-- Joined/Admin Badge (Visual only, state handled by button below) --}} <template x-if="isJoined"> <div class="shrink-0 inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors bg-green-50 text-green-700 border-green-200"> {{ $community->role === 'admin' ? 'Admin' : 'Joined' }} </div> </template> </div> <p class="text-gray-600 text-sm mb-4 line-clamp-2 flex-1"> {{ $community->description }} </p> <div class="flex flex-wrap gap-2 mb-4"> <div class="inline-flex items-center rounded-full border border-transparent px-2.5 py-0.5 text-xs font-semibold transition-colors bg-gray-100 text-gray-600 font-normal hover:bg-gray-200"> {{ $community->category }} </div> </div> <div class="mt-auto pt-4 border-t border-gray-50"> {{-- BUTTON LOGIC: 1. If Joined: Show "Enter Community" Link 2. If Not Joined: Show "Join Community" Button --}} <template x-if="isJoined"> <a href="{{ route('communities.show', $community->id) }}" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 w-full border border-[#2F3D7E] text-[#2F3D7E] hover:bg-[#2F3D7E] hover:text-white group"> Enter Community <svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg> </a> </template> <template x-if="!isJoined"> <button @click="joinCommunity()" :disabled="isLoading" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 w-full bg-[#2F3D7E] hover:bg-[#232d5e] text-white" > <span x-show="!isLoading">Join Community</span> <span x-show="isLoading" class="flex items-center gap-2"> <svg class="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Joining... </span> </button> </template> </div> </div> </div>
| ver. 1.4 |
Github
|
.
| PHP 8.3.30 | Generation time: 0 |
proxy
|
phpinfo
|
Settings