52 lines
3.1 KiB
PHP
52 lines
3.1 KiB
PHP
<div class="space-y-6" x-data="{ msgs: @js(['soon' => __('cloud.action_toast')]) }">
|
|
<div class="animate-rise">
|
|
<h1 class="text-2xl font-semibold tracking-tight text-ink">{{ __('cloud.title') }}</h1>
|
|
<p class="mt-1 text-sm text-muted">{{ __('cloud.subtitle') }}</p>
|
|
</div>
|
|
|
|
<div class="rounded-xl border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:60ms]">
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<span class="grid size-11 place-items-center rounded-lg bg-ink font-semibold text-on-accent">B</span>
|
|
<div class="min-w-0">
|
|
<p class="font-semibold text-ink">{{ $instance['name'] }}</p>
|
|
<a href="https://{{ $instance['domain'] }}" target="_blank" rel="noopener noreferrer" class="font-mono text-sm text-accent-text hover:underline">{{ $instance['domain'] }}</a>
|
|
</div>
|
|
<x-ui.badge :status="$instance['status']" class="sm:ml-2">{{ __('cloud.status_'.$instance['status']) }}</x-ui.badge>
|
|
<a href="https://{{ $instance['domain'] }}" target="_blank" rel="noopener noreferrer"
|
|
class="ml-auto inline-flex items-center gap-2 rounded-pill bg-accent-active px-4 py-2 text-sm font-semibold text-on-accent transition hover:bg-accent-press">
|
|
<x-ui.icon name="external-link" class="size-4" />{{ __('cloud.open') }}
|
|
</a>
|
|
</div>
|
|
<dl class="mt-4 grid grid-cols-1 gap-4 border-t border-line pt-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
@foreach ([
|
|
['cloud.plan', $instance['plan']],
|
|
['cloud.seats', $instance['seats']],
|
|
['cloud.performance', $instance['performance']],
|
|
['cloud.location', $instance['location']],
|
|
['cloud.version', $instance['version'].' · '.__('cloud.current')],
|
|
['cloud.runtime', $instance['php']],
|
|
['cloud.storage', $storageLabel],
|
|
] as [$key, $val])
|
|
<div>
|
|
<dt class="text-xs font-semibold uppercase tracking-wide text-faint">{{ __($key) }}</dt>
|
|
<dd class="mt-1 font-mono text-sm text-body">{{ $val }}</dd>
|
|
</div>
|
|
@endforeach
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="rounded-xl border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:120ms]">
|
|
<h2 class="font-semibold text-ink">{{ __('cloud.storage_growth') }}</h2>
|
|
<p class="text-sm text-muted">{{ __('cloud.storage_growth_sub') }}</p>
|
|
<div class="mt-4 h-56" wire:ignore>
|
|
<x-ui.chart :config="$storageChart" class="h-56" :label="__('cloud.storage_growth')" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-3 animate-rise [animation-delay:180ms]">
|
|
<x-ui.button variant="secondary" @click="$dispatch('notify', { message: msgs.soon })">{{ __('cloud.restart') }}</x-ui.button>
|
|
<x-ui.button variant="secondary" @click="$dispatch('notify', { message: msgs.soon })">{{ __('cloud.snapshot') }}</x-ui.button>
|
|
<x-ui.button variant="secondary" @click="$dispatch('notify', { message: msgs.soon })">{{ __('cloud.logs') }}</x-ui.button>
|
|
</div>
|
|
</div>
|