57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
import { type VariantProps, cva } from 'class-variance-authority';
|
|
|
|
import { getMediaSource } from '@/utils/get-media-source';
|
|
import { cn } from '@/utils/tw-merge';
|
|
|
|
import { Avatar, AvatarFallback, AvatarImage } from '../common/Avatar';
|
|
|
|
import type { FindProfileQuery } from '@/graphql/generated/output';
|
|
|
|
const avatarSizes = cva('', {
|
|
variants: {
|
|
size: {
|
|
sm: 'size-7',
|
|
default: 'size-9',
|
|
lg: 'size-14',
|
|
xl: 'size-32',
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'default',
|
|
},
|
|
});
|
|
|
|
type ChannelAvatarProps = VariantProps<typeof avatarSizes> & {
|
|
channel: Pick<FindProfileQuery['findProfile'], 'avatar' | 'name'>;
|
|
isLive?: boolean;
|
|
};
|
|
|
|
export const ChannelAvatar = ({ size, channel, isLive }: ChannelAvatarProps) => (
|
|
<div className="relative">
|
|
<Avatar
|
|
className={cn(
|
|
avatarSizes({ size }),
|
|
isLive && 'ring-2 ring-rose-500',
|
|
)}
|
|
>
|
|
{channel.avatar
|
|
? (
|
|
<AvatarImage
|
|
className="object-cover"
|
|
src={getMediaSource(channel.avatar)}
|
|
/>
|
|
)
|
|
: null}
|
|
|
|
<AvatarFallback
|
|
className={cn(
|
|
size === 'xl' && 'text-4xl',
|
|
size === 'lg' && 'text-2xl',
|
|
)}
|
|
>
|
|
{channel.name[0]}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</div>
|
|
);
|