42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
|
import type { CSSProperties } from "react";
|
||
|
|
|
||
|
|
interface SkeletonProps {
|
||
|
|
width?: string | number;
|
||
|
|
height?: string | number;
|
||
|
|
borderRadius?: string | number;
|
||
|
|
className?: string;
|
||
|
|
style?: CSSProperties;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Skeleton({ width, height = 16, borderRadius = 6, className = "", style }: SkeletonProps) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={`skeleton-shimmer ${className}`}
|
||
|
|
style={{ width, height, borderRadius, ...style }}
|
||
|
|
aria-hidden="true"
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function SkeletonCard({ className = "" }: { className?: string }) {
|
||
|
|
return (
|
||
|
|
<div className={`skeleton-card ${className}`} aria-hidden="true">
|
||
|
|
<div className="skeleton-shimmer skeleton-card__thumb" />
|
||
|
|
<div className="skeleton-card__body">
|
||
|
|
<div className="skeleton-shimmer skeleton-card__title" />
|
||
|
|
<div className="skeleton-shimmer skeleton-card__desc" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function SkeletonList({ count = 4, className = "" }: { count?: number; className?: string }) {
|
||
|
|
return (
|
||
|
|
<div className={`skeleton-list ${className}`} role="status" aria-label="加载中">
|
||
|
|
{Array.from({ length: count }, (_, i) => (
|
||
|
|
<SkeletonCard key={i} />
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|