80 lines
3.0 KiB
TypeScript
80 lines
3.0 KiB
TypeScript
import { For } from "solid-js";
|
|
|
|
export function MatchDetailsFutureSkeleton() {
|
|
return (
|
|
<div class="animate-pulse">
|
|
<div class="bg-gradient-to-b from-gray-800 to-gray-850 p-6 border-b border-gray-800 text-center">
|
|
<div class="h-2.5 bg-gray-700 rounded w-24 mx-auto mb-4 animate-skeleton-loop" />
|
|
|
|
<div class="flex items-center justify-between gap-4 my-2">
|
|
<div class="flex-1 flex flex-col items-center gap-2 min-w-0">
|
|
<div
|
|
class="size-14 bg-gray-700 rounded-full animate-skeleton-loop"
|
|
style={{ "--delay": "0ms" }}
|
|
/>
|
|
<div class="h-3 bg-gray-700 rounded w-20" />
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center justify-center px-4 py-2 bg-gray-950/50 rounded-2xl border border-gray-800 min-w-[100px] gap-1.5">
|
|
<div class="h-2.5 bg-gray-700 rounded w-14" />
|
|
<div class="h-5 bg-gray-700 rounded w-12" />
|
|
<div class="h-2 bg-gray-700 rounded w-6" />
|
|
</div>
|
|
|
|
<div class="flex-1 flex flex-col items-center gap-2 min-w-0">
|
|
<div
|
|
class="size-14 bg-gray-700 rounded-full animate-skeleton-loop"
|
|
style={{ "--delay": "80ms" }}
|
|
/>
|
|
<div class="h-3 bg-gray-700 rounded w-20" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="h-2.5 bg-gray-700 rounded w-32 mx-auto mt-4" />
|
|
</div>
|
|
|
|
<div class="p-4 space-y-6">
|
|
<div class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 animate-skeleton-loop">
|
|
<div class="h-2.5 bg-gray-700 rounded w-40 mx-auto mb-3" />
|
|
<div class="h-3.5 w-full rounded-full bg-gray-900 border border-gray-750" />
|
|
<div class="flex justify-between items-center mt-2.5">
|
|
<div class="h-2.5 bg-gray-700 rounded w-14" />
|
|
<div class="h-2.5 bg-gray-700 rounded w-14" />
|
|
<div class="h-2.5 bg-gray-700 rounded w-14" />
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 h-32 animate-skeleton-loop"
|
|
style={{ "--delay": "120ms" }}
|
|
/>
|
|
|
|
<div
|
|
class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 space-y-4 animate-skeleton-loop"
|
|
style={{ "--delay": "240ms" }}
|
|
>
|
|
<div class="h-2.5 bg-gray-700 rounded w-32 mx-auto" />
|
|
<div class="flex items-center justify-between gap-2 px-2">
|
|
<div class="flex gap-1">
|
|
<For each={[0, 1, 2, 3, 4]}>
|
|
{() => <div class="size-6 bg-gray-700 rounded-full" />}
|
|
</For>
|
|
</div>
|
|
<div class="h-2.5 bg-gray-700 rounded w-8" />
|
|
<div class="flex gap-1">
|
|
<For each={[0, 1, 2, 3, 4]}>
|
|
{() => <div class="size-6 bg-gray-700 rounded-full" />}
|
|
</For>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 h-40 animate-skeleton-loop"
|
|
style={{ "--delay": "360ms" }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|