67 lines
2.5 KiB
TypeScript
67 lines
2.5 KiB
TypeScript
import { For } from "solid-js";
|
|
|
|
export function MatchDetailsSkeleton() {
|
|
return (
|
|
<div class="animate-pulse">
|
|
<div class="bg-gradient-to-b from-gray-800 to-gray-850 w-full py-5.5 px-10 border-b border-gray-800">
|
|
<div class="flex items-center justify-between gap-2">
|
|
<div class="flex-1 flex items-center gap-2 justify-end">
|
|
<div
|
|
class="h-3 bg-gray-700 rounded w-16 animate-skeleton-loop"
|
|
style={{ "--delay": "0ms" }}
|
|
/>
|
|
<div
|
|
class="size-8 bg-gray-700 rounded-full animate-skeleton-loop"
|
|
style={{ "--delay": "50ms" }}
|
|
/>
|
|
</div>
|
|
<div
|
|
class="w-16 min-w-16 h-7 bg-gray-950/60 rounded-lg border border-gray-700/50 animate-skeleton-loop"
|
|
style={{ "--delay": "100ms" }}
|
|
/>
|
|
<div class="flex-1 flex items-center gap-2 justify-start">
|
|
<div
|
|
class="size-8 bg-gray-700 rounded-full animate-skeleton-loop"
|
|
style={{ "--delay": "50ms" }}
|
|
/>
|
|
<div
|
|
class="h-3 bg-gray-700 rounded w-16 animate-skeleton-loop"
|
|
style={{ "--delay": "0ms" }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-4 space-y-3">
|
|
<For each={[0, 1, 2, 3]}>
|
|
{(i) => (
|
|
<div
|
|
class="bg-gray-800/40 rounded-2xl p-3 border border-gray-800 animate-skeleton-loop"
|
|
style={{ "--delay": `${i * 120}ms` }}
|
|
>
|
|
<div class="flex justify-center mb-2">
|
|
<div class="h-2.5 bg-gray-700 rounded w-14" />
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="flex-1 flex flex-col gap-2">
|
|
<div class="flex items-center gap-2 justify-end">
|
|
<div class="h-3 bg-gray-700 rounded w-16" />
|
|
<div class="size-8 bg-gray-700 rounded-full" />
|
|
</div>
|
|
</div>
|
|
<div class="w-8 h-6 bg-gray-950/60 rounded border border-gray-700/50 flex-shrink-0" />
|
|
<div class="flex-1 flex flex-col gap-2">
|
|
<div class="flex items-center gap-2 justify-start">
|
|
<div class="size-8 bg-gray-700 rounded-full" />
|
|
<div class="h-3 bg-gray-700 rounded w-16" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</For>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|