91 lines
4.9 KiB
PHP
91 lines
4.9 KiB
PHP
<div>
|
|
@php $ws = current_workspace(); @endphp
|
|
<div class="flex items-center justify-between mb-6 nim-reveal nim-reveal-1">
|
|
<div>
|
|
<h1 class="text-t1">QR Codes</h1>
|
|
<p class="text-xs text-t3 mt-0.5">{{ $qrCodes->total() }} total</p>
|
|
</div>
|
|
@if($ws)
|
|
<button
|
|
@click="$dispatch('openModal', {component: 'modals.create-qr-code', arguments: {workspaceUlid: '{{ $ws->ulid }}'}})"
|
|
class="px-4 py-2 bg-accent-gradient text-white rounded-lg text-sm font-semibold hover:opacity-90 transition-opacity flex items-center gap-1.5">
|
|
<x-heroicon-o-plus class="w-4 h-4" />
|
|
New QR Code
|
|
</button>
|
|
@endif
|
|
</div>
|
|
|
|
@if($search ?? false)
|
|
<div class="mb-4 nim-reveal nim-reveal-1">
|
|
<input wire:model.live.debounce.300ms="search" type="text" placeholder="Search QR codes…"
|
|
class="w-full max-w-sm px-3 py-2 bg-s1 border border-white/[.06] rounded-lg text-sm text-t1 placeholder-t3 focus:outline-none focus:ring-1 focus:ring-blue/50">
|
|
</div>
|
|
@endif
|
|
|
|
<div class="bg-s1 border border-white/[.06] rounded-xl overflow-hidden card-shadow nim-reveal nim-reveal-2">
|
|
@forelse($qrCodes as $qr)
|
|
<div class="flex items-center gap-4 px-5 py-3.5 border-b border-white/[.03] last:border-0 table-row-hover hover:bg-white/[.015] group relative">
|
|
{{-- QR type icon --}}
|
|
<div class="w-8 h-8 bg-s2 border border-white/[.06] rounded-lg flex items-center justify-center flex-shrink-0">
|
|
@php
|
|
$displayType = $qr->payload['display_type'] ?? $qr->type;
|
|
$typeColors = ['url' => 'text-blue', 'vcard' => 'text-green', 'wifi' => 'text-amber', 'email' => 'text-purple', 'default' => 'text-t3'];
|
|
$typeColor = $typeColors[$displayType] ?? $typeColors['default'];
|
|
@endphp
|
|
<x-heroicon-o-qr-code class="w-4 h-4 {{ $typeColor }}" />
|
|
</div>
|
|
|
|
<div class="flex-1 min-w-0">
|
|
<div class="text-sm font-semibold text-t1">{{ $qr->payload['label'] ?? ($qr->label ?? $qr->ulid) }}</div>
|
|
<div class="text-xs text-t3 truncate mt-0.5 font-mono">{{ $qr->payload['data'] ?? ($qr->payload['url'] ?? '') }}</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 flex-shrink-0">
|
|
<span class="badge bg-s2 text-t3 border border-white/[.04] uppercase tracking-wide">{{ strtoupper($qr->payload['display_type'] ?? $qr->type) }}</span>
|
|
<span class="badge {{ $qr->is_dynamic ? 'bg-blue/10 text-blue' : 'bg-white/[.06] text-t3' }}">
|
|
{{ $qr->is_dynamic ? 'Dynamic' : 'Static' }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3 opacity-0 group-hover:opacity-100 transition-all duration-150 flex-shrink-0">
|
|
@php $qrUrl = $qr->payload['data'] ?? ($qr->payload['url'] ?? null); @endphp
|
|
@if($qrUrl)
|
|
<x-ui.copy-button :value="$qrUrl" label="Copy URL" />
|
|
@endif
|
|
<button
|
|
@click="$dispatch('openModal', {component: 'modals.edit-qr-code', arguments: {qrUlid: '{{ $qr->ulid }}'}})"
|
|
class="text-t2 text-xs hover:text-t1 transition-colors">Edit</button>
|
|
<button
|
|
@click="$dispatch('openModal', {component: 'modals.delete-qr-code', arguments: {qrUlid: '{{ $qr->ulid }}'}})"
|
|
class="text-t3 text-xs hover:text-red transition-colors">Delete</button>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="p-16 text-center">
|
|
<svg class="w-12 h-12 mx-auto text-t3 mb-4" fill="none" viewBox="0 0 48 48" stroke="currentColor" stroke-width="1">
|
|
<rect x="4" y="4" width="16" height="16" rx="2"/>
|
|
<rect x="28" y="4" width="16" height="16" rx="2"/>
|
|
<rect x="4" y="28" width="16" height="16" rx="2"/>
|
|
<rect x="8" y="8" width="8" height="8"/>
|
|
<rect x="32" y="8" width="8" height="8"/>
|
|
<rect x="8" y="32" width="8" height="8"/>
|
|
<path stroke-linecap="round" d="M28 28h4M36 28h4M28 32v4M32 32h4M36 32v4M28 40h4M32 36h4M36 36v4M40 40h4"/>
|
|
</svg>
|
|
<p class="text-sm text-t2 mb-1.5">No QR codes yet</p>
|
|
<p class="text-xs text-t3 mb-6">Create QR codes for URLs, vCards, WiFi and more.</p>
|
|
@if($ws)
|
|
<button
|
|
@click="$dispatch('openModal', {component: 'modals.create-qr-code', arguments: {workspaceUlid: '{{ $ws->ulid }}'}})"
|
|
class="px-4 py-2.5 bg-accent-gradient text-white rounded-lg text-sm font-semibold hover:opacity-90 transition-opacity">
|
|
Create first QR Code
|
|
</button>
|
|
@endif
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
@if($qrCodes->hasPages())
|
|
<div class="mt-4">{{ $qrCodes->links() }}</div>
|
|
@endif
|
|
</div>
|