60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
import { UserAvatar } from './user-avatar';
|
||
import type * as GQL from '@repo/graphql/types';
|
||
import { Badge } from '@repo/ui/components/ui/badge';
|
||
import { cn } from '@repo/ui/lib/utils';
|
||
import { getCustomerFullName } from '@repo/utils/customer';
|
||
import Link from 'next/link';
|
||
import { memo, type PropsWithChildren } from 'react';
|
||
|
||
type ContactRowProps = GQL.CustomerFieldsFragment & {
|
||
readonly className?: string;
|
||
readonly description?: string;
|
||
readonly showServices?: boolean;
|
||
};
|
||
|
||
function Wrapper({
|
||
children,
|
||
contact,
|
||
}: PropsWithChildren<{ readonly contact: GQL.CustomerFieldsFragment }>) {
|
||
const isActive = contact.active && contact.telegramId;
|
||
|
||
if (isActive) {
|
||
return (
|
||
<Link
|
||
className="block"
|
||
href={contact.active ? `/profile/${contact.telegramId}` : ''}
|
||
key={contact.telegramId}
|
||
>
|
||
{children}
|
||
</Link>
|
||
);
|
||
}
|
||
|
||
return <>{children}</>;
|
||
}
|
||
|
||
export const ContactRow = memo(function ({ className, description, ...contact }: ContactRowProps) {
|
||
return (
|
||
<Wrapper contact={contact}>
|
||
<div
|
||
className={cn(
|
||
'flex items-center justify-between',
|
||
contact.active ? 'hover:bg-accent' : 'opacity-50',
|
||
className,
|
||
)}
|
||
>
|
||
<div className={cn('flex items-center space-x-4 rounded-lg transition-colors')}>
|
||
<UserAvatar {...contact} size="sm" />
|
||
<div>
|
||
<p className="font-medium">{getCustomerFullName(contact)}</p>
|
||
{description && (
|
||
<p className="max-w-52 truncate text-xs text-muted-foreground">{description}</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
{contact.active ? <div /> : <Badge variant="destructive">Неактивен</Badge>}
|
||
</div>
|
||
</Wrapper>
|
||
);
|
||
});
|