28 lines
1.0 KiB
PHP
28 lines
1.0 KiB
PHP
@props(['type' => 'default', 'lines' => 3, 'height' => 'h-4'])
|
|
|
|
@php
|
|
$skeletonTypes = [
|
|
'text' => 'h-4 bg-gray-200 rounded',
|
|
'title' => 'h-6 bg-gray-200 rounded',
|
|
'button' => 'h-10 bg-gray-200 rounded-lg',
|
|
'input' => 'h-12 bg-gray-200 rounded-lg',
|
|
'card' => 'h-32 bg-gray-200 rounded-lg',
|
|
'avatar' => 'w-8 h-8 bg-gray-200 rounded-full',
|
|
'icon' => 'w-5 h-5 bg-gray-200 rounded',
|
|
'image' => 'w-8 h-8 bg-gray-200 rounded object-cover',
|
|
];
|
|
|
|
$skeletonClass = $skeletonTypes[$type] ?? $skeletonTypes['text'];
|
|
@endphp
|
|
|
|
<div class="animate-pulse">
|
|
@if ($type === 'card')
|
|
<div class="{{ $skeletonClass }}"></div>
|
|
@elseif ($type === 'avatar' || $type === 'icon' || $type === 'image')
|
|
<div class="{{ $skeletonClass }}"></div>
|
|
@else
|
|
@for ($i = 0; $i < $lines; $i++)
|
|
<div class="{{ $skeletonClass }} {{ $i === $lines - 1 ? 'w-3/4' : 'w-full' }} {{ $i > 0 ? 'mt-2' : '' }}"></div>
|
|
@endfor
|
|
@endif
|
|
</div>
|