47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
"use client"
|
|
|
|
import { type FullContact, fullContactDisplayName } from "@/lib/contacts/types"
|
|
import { avatarColor, senderInitial } from "@/lib/sender-display"
|
|
|
|
interface ContactRowProps {
|
|
contact: FullContact
|
|
onClick: () => void
|
|
}
|
|
|
|
export function ContactRow({ contact, onClick }: ContactRowProps) {
|
|
const displayName = fullContactDisplayName(contact)
|
|
const name = displayName || contact.emails[0]?.value || contact.phones[0]?.value || "?"
|
|
const subtitle = contact.emails[0]?.value || contact.phones[0]?.value || ""
|
|
const initial = senderInitial(name)
|
|
const bgColor = avatarColor(name)
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
className="flex w-full items-center gap-3 px-4 h-14 hover:bg-gray-50 cursor-pointer text-left"
|
|
>
|
|
{contact.avatarUrl ? (
|
|
<img
|
|
src={contact.avatarUrl}
|
|
alt={name}
|
|
className="h-10 w-10 rounded-full object-cover shrink-0"
|
|
/>
|
|
) : (
|
|
<div
|
|
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-white font-medium text-sm"
|
|
style={{ backgroundColor: bgColor }}
|
|
>
|
|
{initial}
|
|
</div>
|
|
)}
|
|
<div className="min-w-0 flex-1">
|
|
<div className="truncate text-sm text-gray-900">{name}</div>
|
|
{subtitle && displayName && (
|
|
<div className="truncate text-xs text-gray-500">{subtitle}</div>
|
|
)}
|
|
</div>
|
|
</button>
|
|
)
|
|
}
|