You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
1.9 KiB
TypeScript
81 lines
1.9 KiB
TypeScript
/**
|
|
* Centralized skeleton configuration for consistent sizing and styling across skeleton components.
|
|
*/
|
|
|
|
// Avatar sizes - used for avatar/profile picture skeletons
|
|
export const AVATAR_SIZES = {
|
|
xs: 'w-6 h-6',
|
|
sm: 'w-8 h-8',
|
|
md: 'w-10 h-10',
|
|
lg: 'w-12 h-12',
|
|
xl: 'w-16 h-16',
|
|
} as const;
|
|
|
|
// Avatar sizes for md breakpoint (responsive)
|
|
export const AVATAR_SIZES_MD = {
|
|
xs: 'md:w-8 md:h-8',
|
|
sm: 'md:w-10 md:h-10',
|
|
md: 'md:w-12 md:h-12',
|
|
lg: 'md:w-14 md:h-14',
|
|
xl: 'md:w-20 md:h-20',
|
|
} as const;
|
|
|
|
// Icon sizes - used for icon skeletons (generally larger than avatars)
|
|
export const ICON_SIZES = {
|
|
sm: 'w-8 h-8',
|
|
md: 'w-12 h-12',
|
|
lg: 'w-16 h-16',
|
|
xl: 'w-20 h-20',
|
|
} as const;
|
|
|
|
// Shape classes - used for border radius
|
|
export const SKELETON_SHAPES = {
|
|
circle: 'rounded-full',
|
|
square: 'rounded-none',
|
|
rounded: 'rounded-xl',
|
|
'rounded-lg': 'rounded-lg',
|
|
} as const;
|
|
|
|
// Base skeleton classes
|
|
export const SKELETON_BASE = 'animate-pulse';
|
|
export const SKELETON_BG = 'bg-slate-200';
|
|
export const SKELETON_BG_DARK = 'bg-slate-300';
|
|
|
|
// Type exports for component props
|
|
export type AvatarSize = keyof typeof AVATAR_SIZES;
|
|
export type IconSize = keyof typeof ICON_SIZES;
|
|
export type SkeletonShape = keyof typeof SKELETON_SHAPES;
|
|
|
|
// Player item size configurations
|
|
export const PLAYER_ITEM_SIZE_CONFIG = {
|
|
sm: {
|
|
container: 'p-2',
|
|
pill: 'w-8 h-8',
|
|
nameWidth: 'w-24',
|
|
nameHeight: 'h-3',
|
|
levelWidth: 'w-12',
|
|
levelHeight: 'h-3',
|
|
spacing: 'space-x-2',
|
|
},
|
|
md: {
|
|
container: 'p-3',
|
|
pill: 'w-10 h-10',
|
|
nameWidth: 'w-32',
|
|
nameHeight: 'h-4',
|
|
levelWidth: 'w-16',
|
|
levelHeight: 'h-4',
|
|
spacing: 'space-x-3',
|
|
},
|
|
lg: {
|
|
container: 'p-4',
|
|
pill: 'w-12 h-12',
|
|
nameWidth: 'w-36',
|
|
nameHeight: 'h-5',
|
|
levelWidth: 'w-20',
|
|
levelHeight: 'h-5',
|
|
spacing: 'space-x-4',
|
|
},
|
|
} as const;
|
|
|
|
export type PlayerItemSize = keyof typeof PLAYER_ITEM_SIZE_CONFIG;
|