kurihada
0c5676493e
- UserAvatar: 统一头像渲染（5 种尺寸），新增 resolveAvatar 工具函数，替换 SwipeDeck 和 RoomManageModal 中的重复逻辑 - Input: 统一表单输入样式（4 种尺寸 + default/purple 变体），替换 AuthModal、ProfilePage、BlindboxPage 共 12 处 - Card: 统一卡片容器样式 + 可选淡入动画和延迟，替换 ProfilePage 中 7 处重复的 motion.div
35 lines
750 B
TypeScript
35 lines
750 B
TypeScript
import { resolveAvatar } from "@/lib/avatars";
|
|
|
|
const sizeStyles = {
|
|
xs: "h-4 w-4 text-[10px]",
|
|
sm: "h-5 w-5 text-sm",
|
|
md: "h-8 w-8 text-base",
|
|
lg: "h-11 w-11 text-xl",
|
|
xl: "h-14 w-14 text-2xl",
|
|
} as const;
|
|
|
|
interface UserAvatarProps {
|
|
userId: string;
|
|
profile?: { avatar: string } | null;
|
|
size?: keyof typeof sizeStyles;
|
|
bg?: string;
|
|
className?: string;
|
|
}
|
|
|
|
export default function UserAvatar({
|
|
userId,
|
|
profile,
|
|
size = "md",
|
|
bg,
|
|
className = "",
|
|
}: UserAvatarProps) {
|
|
const avatar = resolveAvatar(userId, profile);
|
|
return (
|
|
<span
|
|
className={`inline-flex items-center justify-center rounded-full leading-none ${sizeStyles[size]} ${bg ?? avatar.bg} ${className}`}
|
|
>
|
|
{avatar.emoji}
|
|
</span>
|
|
);
|
|
}
|