45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import { useSession } from '@/lib/auth-client';
|
|
import { cn } from '@/lib/utils';
|
|
import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
|
|
import RoleRing from './RoleRing';
|
|
|
|
interface AvatarUserProps {
|
|
className?: string;
|
|
textSize?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
|
|
}
|
|
|
|
const AvatarUser = ({ className, textSize = 'md' }: AvatarUserProps) => {
|
|
const { data: session } = useSession();
|
|
const imagePath = session?.user?.image
|
|
? `./data/avatar/${session?.user?.image}`
|
|
: undefined;
|
|
const shortName = session?.user?.name
|
|
?.split(' ')
|
|
.slice(0, 2)
|
|
.map((name) => name[0])
|
|
.join('');
|
|
|
|
return (
|
|
<RoleRing type={session?.user?.role}>
|
|
<Avatar className={className}>
|
|
<AvatarImage src={imagePath} />
|
|
<AvatarFallback
|
|
className={cn(
|
|
'bg-orange-400 text-white',
|
|
textSize === 'sm' && 'text-xs',
|
|
textSize === 'md' && 'text-sm',
|
|
textSize === 'lg' && 'text-xl',
|
|
textSize === 'xl' && 'text-2xl',
|
|
textSize === '2xl' && 'text-3xl',
|
|
textSize === '3xl' && 'text-4xl',
|
|
)}
|
|
>
|
|
{shortName}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</RoleRing>
|
|
);
|
|
};
|
|
|
|
export default AvatarUser;
|