38 lines
1.4 KiB
PHP
38 lines
1.4 KiB
PHP
@props([
|
|
'lines' => 3,
|
|
'type' => 'text',
|
|
])
|
|
|
|
@if($type === 'text')
|
|
{{-- Text skeleton - multiple lines with last line shorter --}}
|
|
<div {{ $attributes->merge(['class' => 'space-y-3']) }}>
|
|
@for($i = 0; $i < $lines; $i++)
|
|
<div class="skeleton h-4 {{ $i === $lines - 1 ? 'w-2/3' : 'w-full' }}"></div>
|
|
@endfor
|
|
</div>
|
|
@elseif($type === 'card')
|
|
{{-- Card skeleton - image placeholder + text lines --}}
|
|
<div {{ $attributes->merge(['class' => 'space-y-4']) }}>
|
|
<div class="skeleton h-40 w-full"></div>
|
|
<div class="space-y-3">
|
|
<div class="skeleton h-4 w-3/4"></div>
|
|
<div class="skeleton h-4 w-full"></div>
|
|
<div class="skeleton h-4 w-2/3"></div>
|
|
</div>
|
|
</div>
|
|
@elseif($type === 'avatar')
|
|
{{-- Avatar skeleton - circular placeholder --}}
|
|
<div class="skeleton h-12 w-12 rounded-full {{ $attributes->get('class') }}"></div>
|
|
@elseif($type === 'button')
|
|
{{-- Button skeleton --}}
|
|
<div class="skeleton h-10 w-24 rounded-md {{ $attributes->get('class') }}"></div>
|
|
@elseif($type === 'table-row')
|
|
{{-- Table row skeleton --}}
|
|
<div {{ $attributes->merge(['class' => 'flex items-center gap-4']) }}>
|
|
<div class="skeleton h-4 w-1/4"></div>
|
|
<div class="skeleton h-4 w-1/3"></div>
|
|
<div class="skeleton h-4 w-1/4"></div>
|
|
<div class="skeleton h-4 w-1/6"></div>
|
|
</div>
|
|
@endif
|