skeleton for h2h

src/features/matches/components/team-head-to-head-skeleton.tsx

@@ -0,0 +1,72 @@
+import { Stack, Skeleton, Group, Paper, Divider } from "@mantine/core";
+
+const TeamHeadToHeadSkeleton = () => {
+  return (
+    <Stack gap="md">
+      <Paper p="md" withBorder radius="md">
+        <Stack gap="sm">
+          <Group justify="center" gap="xs">
+            <Skeleton height={28} width={140} />
+            <Skeleton height={20} width={20} />
+            <Skeleton height={28} width={140} />
+          </Group>
+
+          <Group justify="center" gap="lg">
+            <Stack gap={0} align="center">
+              <Skeleton height={32} width={40} />
+              <Skeleton height={16} width={100} mt={4} />
+            </Stack>
+            <Skeleton height={24} width={10} />
+            <Stack gap={0} align="center">
+              <Skeleton height={32} width={40} />
+              <Skeleton height={16} width={100} mt={4} />
+            </Stack>
+          </Group>
+
+          <Group justify="center">
+            <Skeleton height={16} width={150} />
+          </Group>
+        </Stack>
+      </Paper>
+
+      <Stack gap={0}>
+        <Skeleton height={18} width={130} ml="md" mb="xs" />
+
+        <Paper withBorder>
+          <Stack gap={0}>
+            <Group justify="space-between" px="md" py="sm">
+              <Skeleton height={20} width={60} />
+              <Skeleton height={16} width={80} />
+              <Skeleton height={20} width={60} />
+            </Group>
+            <Divider />
+
+            <Group justify="space-between" px="md" py="sm">
+              <Skeleton height={20} width={60} />
+              <Skeleton height={16} width={100} />
+              <Skeleton height={20} width={60} />
+            </Group>
+            <Divider />
+
+            <Group justify="space-between" px="md" py="sm">
+              <Skeleton height={20} width={60} />
+              <Skeleton height={16} width={110} />
+              <Skeleton height={20} width={60} />
+            </Group>
+          </Stack>
+        </Paper>
+      </Stack>
+
+      <Stack gap="xs">
+        <Skeleton height={18} width={150} ml="md" />
+        <Stack gap="sm" p="md">
+          <Skeleton height={100} />
+          <Skeleton height={100} />
+          <Skeleton height={100} />
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default TeamHeadToHeadSkeleton;