60 lines
2.2 KiB
TypeScript
60 lines
2.2 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import Image from "next/image";
|
||
|
|
import type { AiGiftRankOutput } from "@/services/home/types";
|
||
|
|
import { calculateAgeByBirthday, formatNumberToKMB } from "@/lib/utils";
|
||
|
|
import Link from "next/link";
|
||
|
|
|
||
|
|
interface MostGiftedItemProps {
|
||
|
|
character: AiGiftRankOutput;
|
||
|
|
onClick?: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const MostGiftedItem = ({ character, onClick }: MostGiftedItemProps) => {
|
||
|
|
|
||
|
|
const age = calculateAgeByBirthday(character.birthday);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Link href={`/chat/${character.aiId}`} className="flex-[0_0_100%] sm:flex-[0_0_calc(50%-12px)] lg:flex-[0_0_calc(50%-16px)] xl:flex-[0_0_calc(33.333%-16px)] min-w-0 h-full">
|
||
|
|
<div
|
||
|
|
onClick={onClick}
|
||
|
|
className="relative rounded-lg overflow-hidden bg-surface-base-normal cursor-pointer transition-transform duration-300 border border-solid border-outline-normal"
|
||
|
|
>
|
||
|
|
<div className="flex items-stretch">
|
||
|
|
{/* 头像 */}
|
||
|
|
<div className="relative aspect-[111/148] w-[30%] flex-shrink-0">
|
||
|
|
<Image
|
||
|
|
src={character.homeImageUrl || ""}
|
||
|
|
alt={character.nickname || "Character"}
|
||
|
|
fill
|
||
|
|
className="object-cover object-top"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 信息区域 */}
|
||
|
|
<div className="flex-1 flex flex-col justify-between p-4" style={{ background: "linear-gradient(42.5deg, rgba(230, 137, 65, 0) 43.1%, rgba(255, 151, 47, 0.3) 78.36%, rgba(255, 217, 0, 0.6) 116.57%)" }}>
|
||
|
|
<div>
|
||
|
|
<h3 className="txt-title-s flex items-baseline">
|
||
|
|
<span className="truncate">{character.nickname}</span>
|
||
|
|
{/* {age && <span className="flex-shrink-0">, {age}</span>} */}
|
||
|
|
</h3>
|
||
|
|
<p className="txt-body-m line-clamp-2 text-txt-secondary-normal mt-2">
|
||
|
|
{character.introduction}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 礼物值统计 */}
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<Image src="/icons/diamond.svg" alt="" width={12} height={12} />
|
||
|
|
<div className="txt-numMonotype-s">{formatNumberToKMB(Math.floor((character.giftCoinNum || 0) / 100))}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default MostGiftedItem;
|
||
|
|
|