42 lines
980 B
TypeScript
Executable File
42 lines
980 B
TypeScript
Executable File
import {
|
|
SkeletonItem,
|
|
SkeletonSection,
|
|
} from "@web/src/components/presentation/Skeleton";
|
|
import { api } from "packages/client/dist";
|
|
|
|
export const CourseDetailSkeleton = () => {
|
|
return (
|
|
<div className="space-y-8">
|
|
{/* 标题骨架屏 */}
|
|
<div className="space-y-4">
|
|
<SkeletonItem className="h-9 w-3/4" />
|
|
<SkeletonItem className="h-6 w-1/2" delay={0.2} />
|
|
</div>
|
|
|
|
{/* 描述骨架屏 */}
|
|
<SkeletonSection items={2} />
|
|
|
|
{/* 学习目标骨架屏 */}
|
|
<SkeletonSection title items={4} gridCols />
|
|
|
|
{/* 适合人群骨架屏 */}
|
|
<SkeletonSection title items={4} gridCols />
|
|
|
|
{/* 技能骨架屏 */}
|
|
<div>
|
|
<SkeletonItem className="h-6 w-32 mb-4" />
|
|
<div className="flex flex-wrap gap-2">
|
|
{Array.from({ length: 5 }).map((_, i) => (
|
|
<SkeletonItem
|
|
key={i}
|
|
className="h-8 w-20 rounded-full"
|
|
delay={i * 0.2}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
export default CourseDetailSkeleton;
|