07d57f13a8
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
- Introduced new ContactAvatar and ContactAvatarPicker components for enhanced avatar management in contact views. - Updated ContactDetailView and ContactFormView to utilize the new avatar components, improving user experience when adding or editing contacts. - Enhanced ContactHoverCard and ContactRow components to display avatars, providing a more visually appealing interface. - Added loading and error states in ContactsListView for better user feedback during data fetching. - Implemented a new ContactsLoadState component to handle loading and error scenarios in the contacts list. - Updated package.json to include @formkit/auto-animate for improved UI animations.
41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import { ContactAvatar } from "@/components/gmail/contacts/contact-avatar"
|
|
import { type FullContact, fullContactDisplayName } from "@/lib/contacts/types"
|
|
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 || ""
|
|
|
|
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,
|
|
)}
|
|
>
|
|
<ContactAvatar contact={contact} name={name} size="sm" />
|
|
<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>
|
|
)
|
|
}
|