improvement: use PublicationLink in ClickablePublicationCover

app/publications/[id]/page.tsx

@@ -80,10 +80,10 @@ export default async function PublicationPage(props: PublicationPageProps) {
 							<LanguageLink language={pub.language} />
 						</NameValue>
 						<NameValue name={t("translated_by")}>
-							<InlineList>
+							<InlineList separator=" / ">
 								{translatorInfo.map((t, i) => {
 									return (
-										<span key={i}>
+										<span key={i} className="text-nowrap">
 											<TranslatorLink translator={t[0]} />
 											{showIndices ? <sup>{i + 1}</sup> : null}
 										</span>

components/publication-cover.tsx

@@ -4,7 +4,7 @@ import type { ReactNode } from "react";
 
 import type { Publication } from "@/lib/model";
 
-import { AppLink } from "./app-link";
+import { PublicationLink } from "./publication-link";
 
 interface PublicationCoverProps {
 	publication: Publication;
@@ -29,14 +29,14 @@ export function PublicationCover(props: PublicationCoverProps): ReactNode {
 
 export function ClickablePublicationThumbnail(props: PublicationCoverProps) {
 	return (
-		<AppLink
+		<PublicationLink
 			className="relative block h-full object-contain hover:outline"
-			href={`/publication/${props.publication.id}`}
+			publication={props.publication}
 		>
 			<PublicationCover publication={props.publication} />
 			<span className="sr-only">
 				{props.publication.title} ({props.publication.year})
 			</span>
-		</AppLink>
+		</PublicationLink>
 	);
 }

components/publication-link.tsx

@@ -1,13 +1,19 @@
+import type { ReactNode } from "react";
+
 import type { Publication } from "@/lib/model";
 
 import { AppLink } from "./app-link";
 
 interface PublicationLinkProps {
 	publication: Publication;
+	className?: string;
+	children?: ReactNode;
 }
 
 export function PublicationLink(props: PublicationLinkProps) {
 	return (
-		<AppLink href={`/publications/${props.publication.id}`}>{props.publication.title}</AppLink>
+		<AppLink className={props.className} href={`/publications/${props.publication.id}`}>
+			{props.children ?? props.publication.title}
+		</AppLink>
 	);
 }