vchikalkin 30bdc0447f feat(contacts): enhance contact display and improve user experience
- Updated ContactsList to include a description prop in ContactRow for better service representation.
- Renamed header in OrderContacts from "Контакты" to "Участники" for clarity.
- Replaced Avatar components with UserAvatar in various components for consistent user representation.
- Filtered active contacts in MastersGrid and ClientsGrid to improve data handling.
- Adjusted customer query logic to ensure proper handling of telegramId.
2025-09-09 11:23:35 +03:00

42 lines
1.3 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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 Link from 'next/link';
import { memo } from 'react';
type ContactRowProps = GQL.CustomerFieldsFragment & {
readonly className?: string;
readonly description?: string;
readonly showServices?: boolean;
};
export const ContactRow = memo(function ({ className, description, ...contact }: ContactRowProps) {
return (
<Link
className="block"
href={contact.active ? `/profile/${contact.telegramId}` : ''}
key={contact.telegramId}
>
<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">{contact.name}</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>
</Link>
);
});