42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import { Box, Container, Flex, Skeleton, Stack } from "@mantine/core";
|
|
|
|
export function BracketPending() {
|
|
const columns = [4, 2, 1];
|
|
|
|
return (
|
|
<Container size="md" px={0}>
|
|
<Box
|
|
p={0}
|
|
style={{
|
|
overflow: "hidden",
|
|
backgroundImage: `radial-gradient(circle, var(--mantine-color-default-border) 1px, transparent 1px)`,
|
|
backgroundSize: "16px 16px",
|
|
backgroundPosition: "0 0, 8px 8px",
|
|
minHeight: "70dvh",
|
|
}}
|
|
>
|
|
<Skeleton height={18} width={140} radius="sm" m={16} />
|
|
<Flex gap="xl" px={16} align="stretch">
|
|
{columns.map((count, columnIndex) => (
|
|
<Stack
|
|
key={`bracket-pending-round-${columnIndex}`}
|
|
gap="xl"
|
|
justify="space-around"
|
|
style={{ opacity: 1 - columnIndex * 0.25 }}
|
|
>
|
|
{Array.from({ length: count }).map((_, matchIndex) => (
|
|
<Skeleton
|
|
key={`bracket-pending-match-${columnIndex}-${matchIndex}`}
|
|
height={84}
|
|
width={220}
|
|
radius="md"
|
|
/>
|
|
))}
|
|
</Stack>
|
|
))}
|
|
</Flex>
|
|
</Box>
|
|
</Container>
|
|
);
|
|
}
|