subhajit.pal/singleloginsystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: extract connection status UI into reusable component and update ConnectedApps template

Browse Source
This commit is contained in:
= 2026-05-14 14:03:31 +00:00
parent 7d6f6010f4
commit 7bff74a039
2 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
resources/views/components/dashboard/connected-apps/⚡all.blade.php
View File

@ -9,14 +9,11 @@
use Livewire\Component;
use Spatie\LaravelData\Attributes\DataCollectionOf;
use Spatie\LaravelData\DataCollection;
use Spatie\LaravelData\PaginatedDataCollection;
new class extends Component {
#[DataCollectionOf(ConnectedAppData::class)]
public DataCollection $connectedApps;
public function mount(): void
{
$this->connectedApps = $this->getConnectedApps();
}
#[Computed]
@ -29,7 +26,7 @@ private function getConnectedApps()
?>
<div class="flex overflow-x-auto gap-x-4">
@foreach ($connectedApps as $app)
@foreach ($this->getConnectedApps as $app)
<x-shared.card class="min-w-60 p-4" wire:key="{{$app->id}}">
<div class="flex space-x-4">
<div class="bg-blue-200 p-4 rounded-lg flex items-center justify-center max-h-10">
@ -45,18 +42,7 @@ private function getConnectedApps()
</div>
</div>
<div class="mt-4 flex space-x-2.5 justify-between items-center">
<div class="flex items-center space-x-1">
<div
@class([
"w-2 h-2 rounded-full",
'bg-green-400' => $app->status === ConnectionStatusEnum::Connected,
'bg-gray-400' => $app->status === ConnectionStatusEnum::Disconnected,
'bg-yellow-400' => $app->status === ConnectionStatusEnum::Pending,
'bg-red-400' => $app->status === ConnectionStatusEnum::Error,
])
></div>
<p class="text-sm">{{ucfirst($app->status->name)}}</p>
</div>
<x-shared.connection-status :status="$app->status"/>
<x-shared.button>Revoke</x-shared.button>
</div>
</x-shared.card>

20
resources/views/components/shared/connection-status.blade.php Normal file
View File

@ -0,0 +1,20 @@
@php use App\Enums\ConnectionStatusEnum; @endphp
@props(['status'])
@php
if (!$status instanceof ConnectionStatusEnum){
$status = ConnectionStatusEnum::tryFrom($status);
}
@endphp
<div class="flex gap-x-2 items-center text-sm">
<div
@class([
"w-2 h-2 rounded-full",
'bg-green-400' => $status === ConnectionStatusEnum::Connected,
'bg-gray-400' => $status === ConnectionStatusEnum::Disconnected,
'bg-yellow-400' => $status === ConnectionStatusEnum::Pending,
'bg-red-400' => $status === ConnectionStatusEnum::Error,
])
></div>
{{ $status->name }}
</div>