70 lines
5.1 KiB
PHP
70 lines
5.1 KiB
PHP
<div class="space-y-8">
|
|
<div class="flex flex-col justify-between gap-5 sm:flex-row sm:items-end">
|
|
<div>
|
|
<p class="text-sm font-medium uppercase tracking-[0.18em] text-cyan-300">Private workspace</p>
|
|
<h1 class="mt-2 text-3xl font-semibold tracking-tight text-white">Your endpoints</h1>
|
|
<p class="mt-2 max-w-2xl text-slate-400">Create durable URLs for integrations you own and keep their request history for seven days.</p>
|
|
</div>
|
|
<button type="button" wire:click="$toggle('showCreateForm')" class="rounded-xl bg-cyan-400 px-4 py-2.5 text-sm font-semibold text-slate-950 transition hover:bg-cyan-300">
|
|
{{ $showCreateForm ? 'Close form' : 'New endpoint' }}
|
|
</button>
|
|
</div>
|
|
|
|
@if ($showCreateForm)
|
|
<form wire:submit="saveEndpoint" class="rounded-2xl border border-cyan-300/20 bg-cyan-300/[0.06] p-5 sm:p-6">
|
|
<div class="flex flex-col gap-4 sm:flex-row sm:items-end">
|
|
<div class="flex-1">
|
|
<label for="endpoint-name" class="text-sm font-medium text-slate-200">Name <span class="text-slate-500">(optional)</span></label>
|
|
<input id="endpoint-name" type="text" wire:model="endpointName" maxlength="100" placeholder="Payments callback" class="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/70 px-4 py-3 text-sm text-white outline-none placeholder:text-slate-600 focus:border-cyan-300/60 focus:ring-2 focus:ring-cyan-300/20">
|
|
@error('endpointName') <p class="mt-2 text-sm text-rose-300">{{ $message }}</p> @enderror
|
|
</div>
|
|
<button type="submit" class="rounded-xl bg-white px-4 py-3 text-sm font-semibold text-slate-950 transition hover:bg-cyan-50">Create private URL</button>
|
|
</div>
|
|
</form>
|
|
@endif
|
|
|
|
@if ($endpoints->isEmpty())
|
|
<div class="rounded-2xl border border-dashed border-white/15 bg-white/[0.02] px-6 py-16 text-center">
|
|
<div class="mx-auto flex size-12 items-center justify-center rounded-2xl bg-white/10 font-mono text-sm text-cyan-300">//</div>
|
|
<h2 class="mt-5 text-lg font-medium text-white">No private endpoints yet</h2>
|
|
<p class="mx-auto mt-2 max-w-md text-sm leading-6 text-slate-400">Create one when you need a stable webhook URL for a project or integration.</p>
|
|
</div>
|
|
@else
|
|
<div class="grid gap-4 lg:grid-cols-2">
|
|
@foreach ($endpoints as $endpoint)
|
|
<article wire:key="endpoint-{{ $endpoint->id }}" class="rounded-2xl border border-white/10 bg-white/[0.04] p-5 shadow-xl shadow-black/10 sm:p-6">
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div class="min-w-0">
|
|
<div class="flex items-center gap-2">
|
|
<span class="size-2 rounded-full {{ $endpoint->is_active ? 'bg-emerald-400' : 'bg-slate-500' }}"></span>
|
|
<h2 class="truncate font-medium text-white">{{ $endpoint->name ?: 'Private endpoint' }}</h2>
|
|
</div>
|
|
<p class="mt-2 font-mono text-xs text-slate-500">{{ $endpoint->id }}</p>
|
|
</div>
|
|
<span class="rounded-full border border-white/10 px-2.5 py-1 text-xs text-slate-400">{{ $endpoint->requests_count }} requests</span>
|
|
</div>
|
|
|
|
<div class="mt-5 space-y-3 rounded-xl border border-white/10 bg-slate-950/60 p-4 text-xs">
|
|
<div>
|
|
<div class="mb-1 uppercase tracking-wider text-slate-600">Webhook URL</div>
|
|
<a href="{{ $endpoint->webhookUrl() }}" class="block truncate font-mono text-cyan-300 hover:text-cyan-200">{{ $endpoint->webhookUrl() }}</a>
|
|
</div>
|
|
<div>
|
|
<div class="mb-1 uppercase tracking-wider text-slate-600">Inspector</div>
|
|
<a href="{{ $endpoint->publicUrl() }}" class="block truncate font-mono text-slate-300 hover:text-white">{{ $endpoint->publicUrl() }}</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5 flex flex-wrap items-center gap-3 text-sm">
|
|
<a href="{{ $endpoint->publicUrl() }}" class="rounded-lg bg-white px-3 py-2 font-medium text-slate-950 transition hover:bg-cyan-50">Open inspector</a>
|
|
<button type="button" wire:click="toggleEndpoint('{{ $endpoint->id }}')" class="rounded-lg border border-white/10 px-3 py-2 text-slate-300 transition hover:border-white/25 hover:text-white">
|
|
{{ $endpoint->is_active ? 'Disable' : 'Enable' }}
|
|
</button>
|
|
<button type="button" wire:click="deleteEndpoint('{{ $endpoint->id }}')" wire:confirm="Delete this endpoint and all captured requests?" class="rounded-lg px-3 py-2 text-rose-300 transition hover:bg-rose-400/10">Delete</button>
|
|
</div>
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|