4139aa918d
- Changed UserAvatar size from 'xl' to 'lg' in PersonCard for better alignment with design. - Adjusted UserAvatar size from 'sm' to 'xs' in OrderCard to ensure uniformity in avatar presentation. - Updated sizeClasses in UserAvatar component to reflect the new 'xs' size, enhancing responsiveness.
50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { useCustomerQuery } from '@/hooks/api/customers';
|
|
import { useSubscriptionQuery } from '@/hooks/api/subscriptions';
|
|
// eslint-disable-next-line import/extensions
|
|
import AvatarPlaceholder from '@/public/avatar/avatar_placeholder.png';
|
|
import { type CustomerFieldsFragment } from '@repo/graphql/types';
|
|
import { cn } from '@repo/ui/lib/utils';
|
|
import Image from 'next/image';
|
|
|
|
type Sizes = 'lg' | 'md' | 'sm' | 'xs';
|
|
|
|
type UserAvatarProps = Pick<CustomerFieldsFragment, 'telegramId'> & {
|
|
readonly className?: string;
|
|
readonly size?: Sizes;
|
|
};
|
|
|
|
const sizeClasses: Record<Sizes, string> = {
|
|
lg: 'size-32',
|
|
md: 'size-20',
|
|
sm: 'size-16',
|
|
xs: 'size-14',
|
|
};
|
|
|
|
export function UserAvatar({ className, size = 'sm', telegramId = null }: UserAvatarProps) {
|
|
const { data: { customer } = {}, isLoading } = useCustomerQuery({ telegramId });
|
|
const { data: subscriptionData } = useSubscriptionQuery({ telegramId });
|
|
const hasActiveSubscription = subscriptionData?.hasActiveSubscription;
|
|
const sizeClass = sizeClasses[size];
|
|
|
|
return (
|
|
<div className={cn(sizeClass, 'rounded-full', className, isLoading && 'animate-pulse')}>
|
|
<div
|
|
className={cn(
|
|
'size-full rounded-full p-1',
|
|
hasActiveSubscription ? 'bg-gradient-to-r from-purple-600 to-blue-600' : 'bg-transparent',
|
|
)}
|
|
>
|
|
<Image
|
|
alt={customer?.name || 'contact-avatar'}
|
|
className="size-full rounded-full object-cover"
|
|
height={80}
|
|
src={customer?.photoUrl || AvatarPlaceholder}
|
|
width={80}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|