File manager - Edit - /var/www/ratemypay/resources/views/components/network/user-card.blade.php
Back
@props(['user']) <div x-data="{ status: '{{ $user->connectionStatus }}', isLoading: false, async connect() { this.isLoading = true; try { const response = await fetch('{{ route('network.connect', $user->id) }}', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' } }); if (response.ok) { this.status = 'pending'; } } catch (error) { console.error('Connection failed:', error); } finally { this.isLoading = false; } } }" class="bg-white rounded-xl border border-gray-200 p-6 hover:shadow-md transition-shadow h-full flex flex-col" > {{-- Header Section --}} <div class="flex justify-between items-start mb-4 w-full"> <div class="flex gap-3 items-center min-w-0 flex-1 mr-2"> {{-- Avatar --}} <div class="relative flex h-12 w-12 shrink-0 overflow-hidden rounded-full bg-blue-50 text-[#2F3D7E]"> <div class="flex h-full w-full items-center justify-center rounded-full bg-blue-50 font-bold text-[#2F3D7E]"> {{ strtoupper(substr($user->nickname, 0, 2)) }} </div> </div> <div class="min-w-0"> <h3 class="font-bold text-gray-900 text-sm truncate"> {{ '@' . $user->nickname }} </h3> <p class="text-xs text-gray-500 truncate">{{ $user->companyType }}</p> </div> </div> {{-- Dynamic Button based on Alpine 'status' variable --}} <div class="shrink-0"> <template x-if="status === 'connected'"> <button disabled class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium border border-green-200 text-green-700 bg-green-50 hover:bg-green-100 h-8 px-3 cursor-default"> <span class="flex items-center"> <svg class="w-3 h-3 mr-1" 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"/><polyline points="16 11 18 13 22 9"/></svg> Connected </span> </button> </template> <template x-if="status === 'pending'"> <button disabled class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium bg-gray-100 text-gray-500 h-8 px-3 cursor-not-allowed"> <span class="flex items-center"> <svg class="w-3 h-3 mr-1" 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"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> Pending </span> </button> </template> <template x-if="status === 'none'"> <button @click="connect()" :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 bg-[#2F3D7E] hover:bg-[#232d5e] h-8 px-3 text-white" > <span x-show="!isLoading" class="flex items-center"> <svg class="w-3 h-3 mr-1" 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"/><line x1="20" x2="20" y1="8" y2="14"/><line x1="23" x2="17" y1="11" y2="11"/></svg> Connect </span> <span x-show="isLoading" class="flex items-center"> <svg class="animate-spin -ml-1 mr-2 h-3 w-3 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> Sending... </span> </button> </template> </div> </div> {{-- Info Section --}} <div class="mb-4 flex-1"> <div class="text-lg font-semibold text-[#2F3D7E] mb-1 truncate">{{ $user->role }}</div> <div class="flex items-center gap-4 text-xs text-gray-500"> <div class="flex items-center gap-1 min-w-0"> <svg class="w-3 h-3 shrink-0" 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> <span class="truncate">{{ $user->location }}</span> </div> <div class="flex items-center gap-1 min-w-0"> <svg class="w-3 h-3 shrink-0" 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"><rect width="20" height="14" x="2" y="7" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg> <span class="truncate">{{ $user->yoe }}y Exp</span> </div> </div> </div> {{-- Salary Section --}} <div class="bg-gray-50 rounded-lg p-3 mb-4 flex justify-between items-center mt-auto"> <span class="text-xs font-medium text-gray-500">Latest Salary</span> <span class="text-sm font-bold text-green-600">{{ $user->salary }}</span> </div> {{-- Tags Section --}} <div class="flex flex-wrap gap-2"> @foreach($user->tags as $tag) <div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors bg-white border-gray-100 text-gray-500 font-normal hover:bg-gray-50"> {{ $tag }} </div> @endforeach </div> </div>
| ver. 1.4 |
Github
|
.
| PHP 8.3.30 | Generation time: 1.36 |
proxy
|
phpinfo
|
Settings