freedakgmail
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
"use client"
|
|
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
|
import { CircleUser, CircleUserRound } from "lucide-react"
|
|
import type { Gender } from "@/types/family"
|
|
|
|
interface AvatarDisplayProps {
|
|
imageUrl?: string // 改为 URL
|
|
fallbackText?: string
|
|
gender?: Gender
|
|
className?: string
|
|
}
|
|
|
|
export function AvatarDisplay({ imageUrl, fallbackText, gender, className }: AvatarDisplayProps) {
|
|
// 如果有头像 URL，显示头像
|
|
if (imageUrl) {
|
|
return (
|
|
<Avatar className={className}>
|
|
<AvatarImage src={imageUrl} />
|
|
<AvatarFallback className="text-lg font-serif bg-muted">{fallbackText}</AvatarFallback>
|
|
</Avatar>
|
|
)
|
|
}
|
|
|
|
// 没有头像，显示性别图标
|
|
return (
|
|
<Avatar className={className}>
|
|
<AvatarFallback className="bg-muted flex items-center justify-center">
|
|
{gender === 'FEMALE' ? (
|
|
<CircleUserRound className="h-8 w-8 text-pink-400" />
|
|
) : (
|
|
<CircleUser className="h-8 w-8 text-blue-400" />
|
|
)}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
)
|
|
}
|