64fca41f8d
This commit includes reorganizing dependencies in 'package.json' for better readability. It also refactors code associated with user and personal account data along with animations for AvatarFallback and profile name display. Additionally, the 'next' package version has been updated to '14.2.0-canary.56'. Some changes have been made for minor corrections and enhancements in the scripts.
41 lines
972 B
TypeScript
41 lines
972 B
TypeScript
import { Avatar, AvatarFallback, AvatarImage } from '../shadcn/avatar';
|
|
|
|
type SessionProps = {
|
|
displayName: string | null;
|
|
pictureUrl?: string | null;
|
|
};
|
|
|
|
type TextProps = {
|
|
text: string;
|
|
};
|
|
|
|
type ProfileAvatarProps = SessionProps | TextProps;
|
|
|
|
export function ProfileAvatar(props: ProfileAvatarProps) {
|
|
const avatarClassName = 'mx-auto w-9 h-9 group-focus:ring-2';
|
|
|
|
if ('text' in props) {
|
|
return (
|
|
<Avatar className={avatarClassName}>
|
|
<AvatarFallback>
|
|
<span className={'uppercase'}>{props.text.slice(0, 2)}</span>
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
);
|
|
}
|
|
|
|
const initials = props.displayName?.slice(0, 2);
|
|
|
|
return (
|
|
<Avatar className={avatarClassName}>
|
|
<AvatarImage src={props.pictureUrl ?? undefined} />
|
|
|
|
<AvatarFallback className={'animate-in fade-in'}>
|
|
<span suppressHydrationWarning className={'uppercase'}>
|
|
{initials}
|
|
</span>
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
);
|
|
}
|