69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
import { For } from "solid-js";
|
|
import { Card } from "./Card";
|
|
|
|
export function MatchDetailsSkeleton() {
|
|
return (
|
|
<div class="animate-pulse">
|
|
<div class="bg-gradient-to-b from-surface to-surface2 w-full py-5.5 px-10 border-b border-line">
|
|
<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-chip rounded w-16 animate-skeleton-loop"
|
|
style={{ "--delay": "0ms" }}
|
|
/>
|
|
<div
|
|
class="size-8 bg-chip rounded-full animate-skeleton-loop"
|
|
style={{ "--delay": "50ms" }}
|
|
/>
|
|
</div>
|
|
<div
|
|
class="w-16 min-w-16 h-7 bg-elevated/60 rounded-lg border border-line/50 animate-skeleton-loop"
|
|
style={{ "--delay": "100ms" }}
|
|
/>
|
|
<div class="flex-1 flex items-center gap-2 justify-start">
|
|
<div
|
|
class="size-8 bg-chip rounded-full animate-skeleton-loop"
|
|
style={{ "--delay": "50ms" }}
|
|
/>
|
|
<div
|
|
class="h-3 bg-chip 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) => (
|
|
<Card
|
|
variant="section"
|
|
class="p-3 animate-skeleton-loop"
|
|
style={{ "--delay": `${i * 120}ms` }}
|
|
>
|
|
<div class="flex justify-center mb-2">
|
|
<div class="h-2.5 bg-chip 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-chip rounded w-16" />
|
|
<div class="size-8 bg-chip rounded-full" />
|
|
</div>
|
|
</div>
|
|
<div class="w-8 h-6 bg-elevated/60 rounded border border-line/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-chip rounded-full" />
|
|
<div class="h-3 bg-chip rounded w-16" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
</For>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|