56 lines
2.1 KiB
TypeScript
56 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import type { AiHeartbeatRankOutput } from "@/services/home/types";
|
|
import Link from "next/link";
|
|
|
|
interface MostCrushItemProps {
|
|
character: AiHeartbeatRankOutput;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
const MostCrushItem = ({ character, onClick }: MostCrushItemProps) => {
|
|
|
|
return (
|
|
<Link href={`/chat/${character.aiId}`} prefetch 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(194, 65, 230, 0) 43.1%, rgba(242, 100, 164, 0.3) 78.36%, rgba(236, 161, 254, 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/icon-crush.svg" alt="" width={12} height={12} />
|
|
<div className="txt-numMonotype-s">{character.heartbeatValTotal || 0}℃</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export default MostCrushItem;
|