kyle
e2863c1f6c
- activities indexes + client_events/client_errors/rollups/alerts collections - global function middleware via createStart; reads skipped on success - actor stash, denial dedup, control-flow error guards - api route logging, auth event overrides, beacon endpoint, web vitals - centralized admin role checks, shared skeletons, award-badges fix - extracted deriveRunState with tests
43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import { Card, Group, Skeleton, Stack } from "@mantine/core";
|
|
|
|
export interface StatTileSkeletonProps {
|
|
withCard?: boolean;
|
|
align?: "row" | "column";
|
|
numberWidth?: number;
|
|
numberHeight?: number;
|
|
labelWidth?: number;
|
|
labelHeight?: number;
|
|
}
|
|
|
|
export const StatTileSkeleton = ({
|
|
withCard = false,
|
|
align = "column",
|
|
numberWidth = align === "row" ? 36 : 48,
|
|
numberHeight = 28,
|
|
labelWidth = align === "row" ? 110 : 80,
|
|
labelHeight = align === "row" ? 14 : 12,
|
|
}: StatTileSkeletonProps) => {
|
|
const content =
|
|
align === "row" ? (
|
|
<Group gap="xs" align="baseline">
|
|
<Skeleton height={numberHeight} width={numberWidth} radius="sm" />
|
|
<Skeleton height={labelHeight} width={labelWidth} radius="sm" />
|
|
</Group>
|
|
) : (
|
|
<Stack gap={4} align="center">
|
|
<Skeleton height={numberHeight} width={numberWidth} radius="sm" />
|
|
<Skeleton height={labelHeight} width={labelWidth} radius="sm" />
|
|
</Stack>
|
|
);
|
|
|
|
if (!withCard) return content;
|
|
|
|
return (
|
|
<Card withBorder radius="md" p="md">
|
|
{content}
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default StatTileSkeleton;
|