TenantAtlas/resources/views/filament/partials/json-viewer.blade.php
2026-01-20 19:17:54 +01:00

62 lines
1.9 KiB
PHP

@php
/** @var mixed $value */
$value = $value ?? null;
$payloadArray = is_string($value)
? (json_decode($value, true) ?? [])
: ($value ?? []);
$rawJson = json_encode(
$payloadArray,
JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES,
) ?: '';
@endphp
<div
class="space-y-2"
x-data="{
text: @js($rawJson),
copied: false,
async copyJson() {
try {
if (navigator.clipboard && (location.protocol === 'https:' || location.hostname === 'localhost')) {
await navigator.clipboard.writeText(this.text);
} else {
const ta = document.createElement('textarea');
ta.value = this.text;
ta.style.position = 'fixed';
ta.style.inset = '0';
document.body.appendChild(ta);
ta.focus();
ta.select();
document.execCommand('copy');
ta.remove();
}
this.copied = true;
setTimeout(() => (this.copied = false), 1500);
} catch (e) {
this.copied = false;
}
},
}"
>
<div class="flex items-center justify-end gap-2">
<span
x-show="copied"
x-transition
class="text-sm text-gray-500 dark:text-gray-400"
>
Copied
</span>
<x-filament::button size="xs" color="gray" x-on:click="copyJson()">
Copy JSON
</x-filament::button>
</div>
<div class="rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-800 dark:bg-gray-900">
<pre class="max-h-96 overflow-auto whitespace-pre font-mono text-xs text-gray-900 dark:text-gray-100" x-text="text"></pre>
</div>
</div>