Skip to content

Commit

Permalink
refactor: Update followers and following index pages to use user-tile…
Browse files Browse the repository at this point in the history 
… component for displaying user information
  • Loading branch information
@MrPunyapal
MrPunyapal committed Sep 4, 2024
1 parent 820d3f0 commit b3d36ff
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 134 deletions.
51 changes: 5 additions & 46 deletions resources/views/livewire/followers/index.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,59 +15,18 @@
<section class="mt-10 max-w-2xl max-h-96 overflow-y-auto">
<ul class="flex flex-col gap-2">
@foreach ($followers as $follower)
<li
data-parent=true
x-data="clickHandler"
x-on:click="handleNavigation($event)"
<x-user-tile
:user="$follower"
>
<div class="group flex items-center gap-3 rounded-2xl border border-slate-900 bg-slate-950 bg-opacity-80 p-4 transition-colors hover:bg-slate-900">
<figure class="{{ $follower->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-12 w-12 flex-shrink-0 overflow-hidden bg-slate-800 transition-opacity group-hover:opacity-90">
<img
class="{{ $follower->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-12 w-12"
src="{{ $follower->avatar_url }}"
alt="{{ $follower->username }}"
/>
</figure>
<div class="flex flex-col overflow-hidden text-sm">
<a
class="flex items-center space-x-2"
href="{{ route('profile.show', ['username' => $follower->username]) }}"
wire:navigate
x-ref="parentLink"
>
<p class="text-wrap text-left font-medium">
{{ $follower->name }}
</p>

@if ($follower->is_verified && $follower->is_company_verified)
<x-icons.verified-company
:color="$follower->right_color"
class="size-4"
/>
@elseif ($follower->is_verified)
<x-icons.verified
:color="$follower->right_color"
class="size-4"
/>
@endif
</a>
<p class="truncate text-left text-slate-500 transition-colors group-hover:text-slate-400">
{{ '@'.$follower->username }}
@if (auth()->user()?->isNot($user) && $follower->is_follower)
<x-badge class="ml-1">
Follows you
</x-badge>
@endif
</p>
</div>
<x-slot name="followButton">
<x-follow-button
:id="$follower->id"
:isFollower="$user->is(auth()->user()) || $follower->is_follower"
:isFollowing="$follower->is_following"
class="ml-auto"
/>
</div>
</li>
</x-slot>
</x-user-tile>
@endforeach
</ul>
</section>
Expand Down
53 changes: 6 additions & 47 deletions resources/views/livewire/following/index.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,59 +15,18 @@
<section class="mt-10 max-w-2xl max-h-96 overflow-y-auto">
<ul class="flex flex-col gap-2">
@foreach ($following as $followingUser)
<li
data-parent=true
x-data="clickHandler"
x-on:click="handleNavigation($event)"
>
<div class="group flex items-center gap-3 rounded-2xl border border-slate-900 bg-slate-950 bg-opacity-80 p-4 transition-colors hover:bg-slate-900">
<figure class="{{ $followingUser->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-12 w-12 flex-shrink-0 overflow-hidden bg-slate-800 transition-opacity group-hover:opacity-90">
<img
class="{{ $followingUser->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-12 w-12"
src="{{ $followingUser->avatar_url }}"
alt="{{ $followingUser->username }}"
/>
</figure>
<div class="flex flex-col overflow-hidden text-sm">
<a
class="flex items-center space-x-2"
href="{{ route('profile.show', ['username' => $followingUser->username]) }}"
wire:navigate
x-ref="parentLink"
>
<p class="text-wrap text-left font-medium">
{{ $followingUser->name }}
</p>

@if ($followingUser->is_verified && $followingUser->is_company_verified)
<x-icons.verified-company
:color="$followingUser->right_color"
class="size-4"
/>
@elseif ($followingUser->is_verified)
<x-icons.verified
:color="$followingUser->right_color"
class="size-4"
/>
@endif
</a>
<p class="truncate text-left text-slate-500 transition-colors group-hover:text-slate-400">
{{ '@'.$followingUser->username }}
@if ($followingUser->is_follower)
<x-badge class="ml-1">
Follows you
</x-badge>
@endif
</p>
</div>
<x-user-tile
:user="$followingUser"
>
<x-slot name="followButton">
<x-follow-button
:id="$followingUser->id"
:isFollower="$followingUser->is_follower"
:isFollowing="$user->is(auth()->user()) || $followingUser->is_following"
class="ml-auto"
/>
</div>
</li>
</x-slot>
</x-user-tile>
@endforeach
</ul>
</section>
Expand Down
46 changes: 5 additions & 41 deletions resources/views/livewire/home/users.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,54 +23,18 @@ class="w-full rounded-none sm:!rounded-2xl !bg-slate-950 !bg-opacity-80 py-3 pl-
<section class="max-w-2xl">
<ul class="flex flex-col gap-2">
@foreach ($users as $user)
<li
data-parent=true
x-data="clickHandler"
x-on:click="handleNavigation($event)"
<x-user-tile
:user="$user"
>
<div class="group flex items-center gap-3 rounded-2xl border border-slate-900 bg-slate-950 bg-opacity-80 p-4 transition-colors hover:bg-slate-900">
<figure class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-12 w-12 flex-shrink-0 overflow-hidden bg-slate-800 transition-opacity group-hover:opacity-90">
<img
class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-12 w-12"
src="{{ $user->avatar_url }}"
alt="{{ $user->username }}"
/>
</figure>
<div class="flex flex-col overflow-hidden text-sm">
<a
class="flex items-center space-x-2"
href="{{ route('profile.show', ['username' => $user->username]) }}"
wire:navigate
x-ref="parentLink"
>
<p class="text-wrap text-left font-medium">
{{ $user->name }}
</p>

@if ($user->is_verified && $user->is_company_verified)
<x-icons.verified-company
:color="$user->right_color"
class="size-4"
/>
@elseif ($user->is_verified)
<x-icons.verified
:color="$user->right_color"
class="size-4"
/>
@endif
</a>
<p class="truncate text-slate-500 transition-colors group-hover:text-slate-400">
{{ '@'.$user->username }}
</p>
</div>
<x-slot name="followButton">
<x-follow-button
:id="$user->id"
:isFollower="auth()->check() && $user->is_follower"
:isFollowing="auth()->check() && $user->is_following"
class="ml-auto"
/>
</div>
</li>
</x-slot>
</x-user-tile>
@endforeach
</ul>
</section>
Expand Down

0 comments on commit b3d36ff

Please sign in to comment.