49 lines
2.2 KiB
PHP
49 lines
2.2 KiB
PHP
@php
|
|
$features = [
|
|
'cpu' => ['icon' => 'cpu.svg', 'label' => 'CPU', 'unit' => 'vCore'],
|
|
'ram' => ['icon' => 'ram.svg', 'label' => 'RAM', 'unit' => 'GB'],
|
|
'disk' => ['icon' => 'storage.svg', 'label' => 'Disk', 'unit' => 'GB'],
|
|
'gpu' => ['icon' => 'video.svg', 'label' => 'GPU', 'unit' => 'GB'],
|
|
'ip' => ['icon' => 'network.svg', 'label' => 'IP Public', 'unit' => 'IP'],
|
|
'bandwidth' => ['icon' => 'bandwidth.svg', 'label' => 'Băng thông', 'unit' => 'GB']
|
|
];
|
|
@endphp
|
|
|
|
<div x-data="{ loading: true }" data-skeleton-id="vps-features">
|
|
<!-- Skeleton Loading for VPS Features -->
|
|
<template x-if="loading">
|
|
<div class="space-y-3 animate-pulse">
|
|
@foreach (range(1, count($features)) as $i)
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-5 h-5 bg-gray-200 rounded"></div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="h-4 bg-gray-200 rounded w-16"></div>
|
|
<div class="h-4 bg-gray-200 rounded w-12"></div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Actual VPS Features -->
|
|
<template x-if="!loading">
|
|
<div class="space-y-3">
|
|
@foreach ($features as $key => $feature)
|
|
@if ($product->$key)
|
|
<div class="flex items-center space-x-3">
|
|
<div class="flex-shrink-0">
|
|
<img src="{{ asset('/icon/' . $feature['icon']) }}" alt="{{ $feature['label'] }}" class="w-5 h-5">
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-md font-semibold">{{ $feature['label'] }}:</span>
|
|
<div class="font-semibold text-blue-800 h-4">
|
|
<span>{{ $product->$key }}</span>
|
|
<span class="text-xs text-blue-600">{{ $feature['unit'] }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
</template>
|
|
</div>
|