72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import LargeRankCard from "./LargeRankCard";
|
|
import SmallRankCard from "./SmallRankCard";
|
|
import { AiChatRankOutput, AiHeartbeatRankOutput, AiGiftRankOutput } from "@/services/home/types";
|
|
import { RankType } from "@/types/global";
|
|
|
|
interface TopHeaderProps {
|
|
rankData: AiChatRankOutput[] | AiHeartbeatRankOutput[] | AiGiftRankOutput[];
|
|
rankType: RankType;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
export default function TopHeader({ rankData, rankType, isLoading }: TopHeaderProps) {
|
|
if (isLoading) {
|
|
return (
|
|
<div className="max-w-[624px] mx-auto mt-6">
|
|
<div className="flex items-center gap-4 w-full">
|
|
<div className="flex-1 py-12">
|
|
<div className="w-full aspect-[240/360] rounded-b-lg bg-surface-nest-normal animate-pulse" />
|
|
</div>
|
|
<div className="w-[38.5%] aspect-[240/360] rounded-b-lg bg-surface-nest-normal animate-pulse" />
|
|
<div className="flex-1 py-12">
|
|
<div className="w-full aspect-[240/360] rounded-b-lg bg-surface-nest-normal animate-pulse" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!rankData || rankData.length === 0) {
|
|
return (
|
|
<div className="max-w-[624px] mx-auto mt-6">
|
|
<div className="flex justify-center items-center h-64">
|
|
<div className="text-txt-secondary-normal">No leaderboard data yet</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 获取前3名数据
|
|
const topThree = rankData.slice(0, 3);
|
|
const firstPlace = topThree[0];
|
|
const secondPlace = topThree[1];
|
|
const thirdPlace = topThree[2];
|
|
|
|
return (
|
|
<div className="max-w-[624px] mx-auto mt-6">
|
|
<div className="flex items-center gap-4 w-full">
|
|
{/* 第二名 */}
|
|
<SmallRankCard
|
|
item={secondPlace}
|
|
rankType={rankType}
|
|
rank={2}
|
|
/>
|
|
|
|
{/* 第一名 */}
|
|
<LargeRankCard
|
|
item={firstPlace}
|
|
rankType={rankType}
|
|
/>
|
|
|
|
{/* 第三名 */}
|
|
<SmallRankCard
|
|
item={thirdPlace}
|
|
rankType={rankType}
|
|
rank={3}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |