47 lines
1.9 KiB
TypeScript
47 lines
1.9 KiB
TypeScript
import Link from "next/link";
|
|
|
|
import { DecryptedImage } from "@/components/common/decrypted-image";
|
|
import type { ShortDramaItem } from "@/components/short-drama/data";
|
|
import { videoHref } from "@/components/video/video-card";
|
|
import { IMG_PLACEHOLDER } from "@/lib/image/decrypt";
|
|
|
|
export function VideoRelatedAside({ items }: { items: ShortDramaItem[] }) {
|
|
const list = items.filter((item) => item.kind === "drama");
|
|
if (!list.length) return null;
|
|
|
|
return (
|
|
<aside data-component="video-related-aside" className="flex min-w-0 flex-1 flex-col gap-4 rounded-2xl bg-[rgba(24,23,46,0.88)] p-6 outline outline-1 -outline-offset-1 outline-[#383657]">
|
|
<div className="flex h-9 items-center justify-between">
|
|
<h2 className="text-[22px] font-bold text-white">热门推荐</h2>
|
|
<Link href="/video/hot" className="flex items-center gap-1 text-xs leading-[18px] text-[#B8B2C2] hover:text-white">
|
|
更多
|
|
<img src="/images/more_arrow.svg" alt="" className="size-3.5" />
|
|
</Link>
|
|
</div>
|
|
{list.map((item) => (
|
|
<Link
|
|
key={item.id}
|
|
href={item.href || videoHref(item.id, item.slug)}
|
|
className="group flex h-24 items-center gap-4"
|
|
>
|
|
<DecryptedImage
|
|
src={item.cover}
|
|
fallback={IMG_PLACEHOLDER}
|
|
alt=""
|
|
className="h-24 w-[128px] shrink-0 rounded-lg object-cover"
|
|
/>
|
|
<div className="flex min-w-0 flex-1 flex-col gap-2">
|
|
<h3 className="line-clamp-2 text-base leading-[23px] text-[#F5F0FA] group-hover:text-[#F12B9E]">
|
|
{item.title}
|
|
</h3>
|
|
<div className="flex items-center justify-between text-xs leading-[18px]">
|
|
<span className="truncate text-[#A89EB5]">{item.tags[0]?.name}</span>
|
|
<span className="shrink-0 text-[#ABA1B8]">{item.heat}</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</aside>
|
|
);
|
|
}
|