File manager - Edit - /var/www/ratemypay/resources/views/components/network/community-hub.blade.php
Back
@props([ 'isEmbedded' => false, 'myCommunities' => [], 'discoverCommunities' => [], 'categories' => [], 'connectedUsers' => [] ]) {{-- Added 'selectedCategory' to x-data state --}} <div x-data="{ activeHubTab: 'my-communities', showCreateModal: false, selectedCategory: 'All' }"> @if(!$isEmbedded) <div class="w-full min-h-screen bg-[#f4f4f4]"> <div class="max-w-6xl mx-auto px-4 py-8"> @endif {{-- Header (Unchanged) --}} <div class="flex flex-col md:flex-row md:items-center justify-between mb-8 gap-4"> <div> <h1 class="text-3xl font-bold text-[#2F3D7E]">Communities</h1> <p class="text-gray-500 mt-1">Connect with peers, compare salaries, and grow together.</p> </div> <button @click="showCreateModal = true" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background 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 bg-[#2F3D7E] hover:bg-[#232d5e] text-white shadow-lg hover:shadow-xl transition-all" > <svg class="w-4 h-4 mr-2" 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 5v14"/></svg> Create Community </button> </div> {{-- Main Content --}} <div class="w-full"> <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6"> <div class="bg-white border border-gray-200 p-1 h-auto rounded-xl inline-flex"> <button @click="activeHubTab = 'my-communities'" :class="activeHubTab === 'my-communities' ? 'bg-[#2F3D7E] text-white' : 'text-gray-600 hover:bg-gray-50'" class="rounded-lg px-4 py-2 transition-all text-sm font-medium" > My Communities </button> <button @click="activeHubTab = 'discover'" :class="activeHubTab === 'discover' ? 'bg-[#2F3D7E] text-white' : 'text-gray-600 hover:bg-gray-50'" class="rounded-lg px-4 py-2 transition-all text-sm font-medium" > Discover </button> </div> <div class="relative w-full md:w-72"> <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" 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="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg> <input type="text" placeholder="Search communities..." class="w-full pl-10 pr-4 py-2 bg-white border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E]" > </div> </div> {{-- My Communities Tab (Unchanged) --}} <div x-show="activeHubTab === 'my-communities'" class="mt-0" style="display: none;"> @if(isset($myCommunities) && count($myCommunities) > 0) <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> @foreach($myCommunities as $community) <x-network.community-card :community="$community" /> @endforeach <div @click="activeHubTab = 'discover'" class="bg-white/50 border-2 border-dashed border-gray-200 rounded-xl flex flex-col items-center justify-center p-6 text-center hover:bg-white hover:border-[#2F3D7E]/50 transition-all cursor-pointer group h-full min-h-[280px]" > <div class="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center mb-4 group-hover:bg-[#2F3D7E] transition-colors"> <svg class="w-6 h-6 text-[#2F3D7E] group-hover:text-white" 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="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg> </div> <h3 class="font-semibold text-gray-900 mb-1">Find more communities</h3> <p class="text-sm text-gray-500">Browse by role, location, or industry</p> </div> </div> @else <div class="text-center py-20 bg-white rounded-xl border border-gray-200"> <div class="w-16 h-16 bg-gray-100 rounded-xl flex items-center justify-center mx-auto mb-4"> <svg class="w-8 h-8 text-gray-400" 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> </div> <h3 class="text-lg font-semibold text-gray-900">No communities yet</h3> <p class="text-gray-500 max-w-sm mx-auto mt-2 mb-6">Join a community to compare salaries with peers in your industry or location.</p> <button @click="activeHubTab = 'discover'" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background 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 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 border-gray-200" > Browse Communities </button> </div> @endif </div> {{-- ======================================== TAB: DISCOVER (UPDATED FILTERING) ======================================== --}} <div x-show="activeHubTab === 'discover'" class="mt-0 space-y-8" style="display: none;"> {{-- Category Buttons --}} <div class="flex gap-4 overflow-x-auto pb-2" style="scrollbar-width: none; -ms-overflow-style: none;"> {{-- Manually add "All" button first --}} <button @click="selectedCategory = 'All'" :class="selectedCategory === 'All' ? 'bg-[#2F3D7E] text-white' : 'bg-white border border-gray-200 text-gray-600 hover:bg-gray-50'" class="px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-colors" > All </button> {{-- Loop through dynamic categories --}} @foreach($categories as $cat) <button @click="selectedCategory = '{{ $cat }}'" :class="selectedCategory === '{{ $cat }}' ? 'bg-[#2F3D7E] text-white' : 'bg-white border border-gray-200 text-gray-600 hover:bg-gray-50'" class="px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-colors" > {{ $cat }} </button> @endforeach </div> {{-- Discover Grid Logic: We loop through ALL communities but hide those that don't match the selection. --}} @if(isset($discoverCommunities)) <div> <h2 class="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2"> <svg class="w-5 h-5 text-[#2F3D7E]" 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"/><line x1="2" x2="22" y1="12" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg> Explore Communities </h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> @foreach($discoverCommunities as $community) <div x-show="selectedCategory === 'All' || selectedCategory === '{{ $community->category }}'"> <x-network.community-card :community="$community" /> </div> @endforeach </div> {{-- Empty state for filtering --}} <div x-show="$el.previousElementSibling.children.length > 0 && Array.from($el.previousElementSibling.children).every(child => child.style.display === 'none')" class="text-center py-12" style="display: none;"> <p class="text-gray-500">No communities found in this category.</p> </div> </div> @endif </div> </div> <x-network.create-community-modal :categories="$categories" :connected-users="$connectedUsers"/> @if(!$isEmbedded) </div> </div> @endif </div>
| ver. 1.4 |
Github
|
.
| PHP 8.3.30 | Generation time: 0 |
proxy
|
phpinfo
|
Settings