admin
55 lines
2.3 KiB
TypeScript
55 lines
2.3 KiB
TypeScript
import Link from "next/link";
|
|
import { Users, User } from "lucide-react";
|
|
import type { CoStar } from "@/lib/db/queries";
|
|
import { portraitUrl } from "@/lib/assetUrls";
|
|
|
|
export function CoStarsRow({ actressName, costars }: { actressName: string; costars: CoStar[] }) {
|
|
if (costars.length === 0) return null;
|
|
return (
|
|
<section className="my-6">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<Users className="w-4 h-4 text-[var(--color-fg-muted)]" />
|
|
<h2 className="text-xs uppercase tracking-wider font-mono text-[var(--color-fg-muted)]">
|
|
Frequent co-stars
|
|
</h2>
|
|
<span className="text-[10px] font-mono text-[var(--color-fg-muted)]">
|
|
({costars.length})
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{costars.map((c) => (
|
|
<Link
|
|
key={c.id}
|
|
href={`/actress/${c.slug}`}
|
|
title={`${c.shared} cover${c.shared === 1 ? "" : "s"} with ${actressName}`}
|
|
className="group flex items-center gap-2 pl-1 pr-3 py-1 rounded-full glass glass-hover"
|
|
>
|
|
<span className="relative w-7 h-7 rounded-full overflow-hidden bg-[var(--color-bg-2)] shrink-0">
|
|
{c.portraitPath ? (
|
|
/* eslint-disable-next-line @next/next/no-img-element */
|
|
<img
|
|
src={portraitUrl({ path: c.portraitPath, slug: c.slug, slot: "1" })}
|
|
alt={c.name}
|
|
draggable={false}
|
|
className="absolute top-1/2 left-1/2 max-w-none origin-center pointer-events-none"
|
|
style={{
|
|
transform: `translate(-50%, -50%) translate(${c.portraitOffsetX}px, ${c.portraitOffsetY}px) scale(${c.portraitZoom})`,
|
|
width: 28,
|
|
height: "auto",
|
|
}}
|
|
/>
|
|
) : (
|
|
<span className="absolute inset-0 grid place-items-center text-[var(--color-fg-muted)]">
|
|
<User className="w-3.5 h-3.5" />
|
|
</span>
|
|
)}
|
|
</span>
|
|
<span className="text-sm">{c.name}</span>
|
|
<span className="text-[10px] font-mono text-[var(--color-cyan)]">{c.shared}</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|