56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
"use client"
|
|
|
|
import { type FullContact, fullContactDisplayName } from "@/lib/contacts/types"
|
|
import { avatarColor, senderInitial } from "@/lib/sender-display"
|
|
import {
|
|
CONTACTS_PANEL_ROW_CLASS,
|
|
CONTACTS_MUTED_TEXT,
|
|
CONTACTS_HEADING_TEXT,
|
|
} from "@/lib/contacts-chrome-classes"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
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={cn(
|
|
"flex h-14 w-full items-center gap-3 px-4 text-left",
|
|
CONTACTS_PANEL_ROW_CLASS,
|
|
)}
|
|
>
|
|
{contact.avatarUrl ? (
|
|
<img
|
|
src={contact.avatarUrl}
|
|
alt={name}
|
|
className="h-10 w-10 shrink-0 rounded-full object-cover"
|
|
/>
|
|
) : (
|
|
<div
|
|
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-sm font-medium text-white"
|
|
style={{ backgroundColor: bgColor }}
|
|
>
|
|
{initial}
|
|
</div>
|
|
)}
|
|
<div className="min-w-0 flex-1">
|
|
<p className={cn("truncate text-sm", CONTACTS_HEADING_TEXT)}>{name}</p>
|
|
{subtitle && displayName ? (
|
|
<p className={cn("truncate text-xs", CONTACTS_MUTED_TEXT)}>{subtitle}</p>
|
|
) : null}
|
|
</div>
|
|
</button>
|
|
)
|
|
}
|