83 lines
3.7 KiB
PHP
83 lines
3.7 KiB
PHP
@props(['block'])
|
|
|
|
@php
|
|
/** @var \App\Models\PageBlock $block */
|
|
use Illuminate\Support\Carbon;
|
|
|
|
$c = $block->content ?? [];
|
|
$rawTarget = data_get($c, 'target_datetime');
|
|
try {
|
|
$targetMs = $rawTarget ? (int) (Carbon::parse($rawTarget)->getTimestamp() * 1000) : 0;
|
|
} catch (\Throwable) {
|
|
$targetMs = 0;
|
|
}
|
|
$title = data_get($c, 'title');
|
|
$expiredAction = (string) data_get($c, 'expired_action', 'hide');
|
|
$expiredMessage = (string) data_get($c, 'expired_message', '');
|
|
$style = (string) data_get($c, 'style', 'large');
|
|
$showLabels = filter_var(data_get($c, 'show_labels', true), FILTER_VALIDATE_BOOLEAN);
|
|
$labels = data_get($c, 'labels', []);
|
|
$labelsArr = is_array($labels) ? $labels : [];
|
|
$gridClass = $style === 'compact' ? 'gap-2 px-2 py-3 sm:gap-3 sm:px-3' : 'gap-3 px-3 py-4 sm:gap-4 sm:px-4 sm:py-5';
|
|
$numClass = $style === 'compact' ? 'text-xl sm:text-2xl' : 'text-2xl sm:text-3xl';
|
|
@endphp
|
|
|
|
@if ($targetMs > 0)
|
|
<div
|
|
class="w-full"
|
|
x-show="phase !== 'thanks'"
|
|
x-cloak
|
|
x-data="countdownBlock(@js([
|
|
'targetMs' => $targetMs,
|
|
'showLabels' => $showLabels,
|
|
'labels' => [
|
|
'days' => (string) ($labelsArr['days'] ?? __('day')),
|
|
'hours' => (string) ($labelsArr['hours'] ?? __('hrs')),
|
|
'minutes' => (string) ($labelsArr['minutes'] ?? __('mins')),
|
|
'seconds' => (string) ($labelsArr['seconds'] ?? __('secs')),
|
|
],
|
|
'expiredAction' => $expiredAction,
|
|
'expiredMessage' => $expiredMessage,
|
|
]))"
|
|
>
|
|
<div x-show="!expired" x-cloak>
|
|
@if (filled($title))
|
|
<p class="mb-3 text-center text-sm font-medium text-white/90 sm:text-base">{{ $title }}</p>
|
|
@endif
|
|
<div
|
|
class="grid grid-cols-4 rounded-2xl border border-white/15 bg-black/35 text-center shadow-inner {{ $gridClass }}"
|
|
role="timer"
|
|
aria-live="polite"
|
|
>
|
|
<div>
|
|
<div class="font-mono font-semibold tabular-nums text-white {{ $numClass }}" x-text="pad(days)"></div>
|
|
@if ($showLabels)
|
|
<div class="mt-2 text-[10px] uppercase tracking-wider text-white/65 sm:text-xs" x-text="labels.days"></div>
|
|
@endif
|
|
</div>
|
|
<div>
|
|
<div class="font-mono font-semibold tabular-nums text-white {{ $numClass }}" x-text="pad(hours)"></div>
|
|
@if ($showLabels)
|
|
<div class="mt-2 text-[10px] uppercase tracking-wider text-white/65 sm:text-xs" x-text="labels.hours"></div>
|
|
@endif
|
|
</div>
|
|
<div>
|
|
<div class="font-mono font-semibold tabular-nums text-white {{ $numClass }}" x-text="pad(minutes)"></div>
|
|
@if ($showLabels)
|
|
<div class="mt-2 text-[10px] uppercase tracking-wider text-white/65 sm:text-xs" x-text="labels.minutes"></div>
|
|
@endif
|
|
</div>
|
|
<div>
|
|
<div class="font-mono font-semibold tabular-nums text-white {{ $numClass }}" x-text="pad(seconds)"></div>
|
|
@if ($showLabels)
|
|
<div class="mt-2 text-[10px] uppercase tracking-wider text-white/65 sm:text-xs" x-text="labels.seconds"></div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div x-show="expired && expiredAction === 'show_message'" x-cloak>
|
|
<p class="text-center text-sm text-white/90" x-text="expiredMessage"></p>
|
|
</div>
|
|
</div>
|
|
@endif
|