37 lines
1.8 KiB
TypeScript
37 lines
1.8 KiB
TypeScript
import { navigateTo } from "@/app/browser-location";
|
|
import { routePaths } from "@/app/route-paths";
|
|
import type { CharacterListItem as CharacterListItemData } from "@/features/characters/model/types";
|
|
|
|
export function CharacterListItem({ character }: { readonly character: CharacterListItemData }) {
|
|
const detailPath = routePaths.aiCharacterDetail(String(character.id));
|
|
const description = character.description.length > 0 ? character.description : "설명이 없습니다.";
|
|
|
|
return (
|
|
<a
|
|
aria-label={`${character.name} 선택`}
|
|
className="block rounded-lg border border-border bg-card p-4 text-foreground hover:bg-accent focus-visible:bg-accent"
|
|
href={detailPath}
|
|
onClick={(event) => {
|
|
event.preventDefault();
|
|
navigateTo(detailPath);
|
|
}}
|
|
>
|
|
<span className="flex items-start gap-3">
|
|
{character.imageUrl === null ? (
|
|
<span aria-hidden="true" className="grid size-12 shrink-0 place-items-center rounded-md bg-muted font-semibold text-muted-foreground">
|
|
{character.name.slice(0, 1)}
|
|
</span>
|
|
) : (
|
|
<img alt="" className="size-12 shrink-0 rounded-md object-cover" height="48" loading="lazy" src={character.imageUrl} width="48" />
|
|
)}
|
|
<span className="min-w-0 flex-1">
|
|
<span className="block break-keep break-words font-semibold">{character.name}</span>
|
|
<span className="mt-1 line-clamp-2 block break-keep break-words text-sm text-muted-foreground">{description}</span>
|
|
<span className="mt-2 block break-keep break-words text-xs font-semibold text-info">ID {character.id} · {character.region}</span>
|
|
<span className="mt-1 block break-keep break-words text-xs text-muted-foreground">{character.tags.join(", ")}</span>
|
|
</span>
|
|
</span>
|
|
</a>
|
|
);
|
|
}
|