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.
78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
import {
|
|
PLAYER_ITEM_SIZE_CONFIG,
|
|
SKELETON_BASE,
|
|
SKELETON_BG,
|
|
type PlayerItemSize,
|
|
} from './skeletonConfig';
|
|
|
|
interface PlayerItemSkeletonProps {
|
|
variant?: 'default' | 'compact' | 'booking';
|
|
size?: PlayerItemSize;
|
|
showSecondaryData?: boolean;
|
|
showActions?: boolean;
|
|
hasExpandableContent?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export default function PlayerItemSkeleton({
|
|
variant = 'default',
|
|
size = 'md',
|
|
showSecondaryData = false,
|
|
showActions = false,
|
|
hasExpandableContent = false,
|
|
className = ''
|
|
}: PlayerItemSkeletonProps) {
|
|
const config = PLAYER_ITEM_SIZE_CONFIG[size];
|
|
|
|
const getContainerStyles = () => {
|
|
let base = `flex items-center ${config.spacing} ${config.container} rounded-xl`;
|
|
|
|
switch (variant) {
|
|
case 'booking':
|
|
base += ' bg-white border border-slate-200';
|
|
break;
|
|
case 'compact':
|
|
base = `flex items-center ${config.spacing} p-2 rounded-lg bg-slate-50`;
|
|
break;
|
|
default:
|
|
base += ' bg-white border border-slate-200';
|
|
}
|
|
|
|
return `${base} ${className}`;
|
|
};
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<div className={getContainerStyles()}>
|
|
{/* Pill skeleton */}
|
|
<div className={`${config.pill} rounded-full ${SKELETON_BG} ${SKELETON_BASE} shadow-lg`} />
|
|
|
|
{/* Name and level skeleton */}
|
|
<div className="flex-1">
|
|
<div className={`${config.nameHeight} ${SKELETON_BG} rounded ${config.nameWidth} mb-2 ${SKELETON_BASE}`} />
|
|
<div className="flex gap-2">
|
|
<div className={`${config.levelHeight} ${SKELETON_BG} rounded-full ${config.levelWidth} ${SKELETON_BASE}`} />
|
|
<div className={`${config.levelHeight} ${SKELETON_BG} rounded-full ${config.levelWidth} ${SKELETON_BASE}`} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Secondary data skeleton */}
|
|
{showSecondaryData && (
|
|
<div className="flex gap-2">
|
|
<div className={`w-16 h-4 ${SKELETON_BG} rounded ${SKELETON_BASE}`} />
|
|
</div>
|
|
)}
|
|
|
|
{/* Actions skeleton */}
|
|
{showActions && (
|
|
<div className={`w-8 h-8 rounded-full ${SKELETON_BG} ${SKELETON_BASE}`} />
|
|
)}
|
|
|
|
{/* Expand arrow skeleton */}
|
|
{hasExpandableContent && (
|
|
<div className={`w-8 h-8 rounded-full ${SKELETON_BG} ${SKELETON_BASE}`} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |