This commit is contained in:
parent
46f4fc7087
commit
4158487cb5
|
|
@ -34,26 +34,35 @@ export interface UserData {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function UserMenu({ user }: { user: UserData }) {
|
export function UserMenu({ user }: { user: UserData }) {
|
||||||
|
|
||||||
const [isLoading, setIsLoading] = React.useState(false);
|
const [isLoading, setIsLoading] = React.useState(false);
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
|
const getRandomColor = (name) => {
|
||||||
|
if (!name) return "#999"; // 默认颜色
|
||||||
|
const colors = ["#FF5733", "#33FF57", "#3357FF", "#FF33A8", "#FFC300", "#FF5733", "#57FF33", "#A833FF"];
|
||||||
|
const index = name.charCodeAt(0) % colors.length; // 根据名字的首字母选择颜色
|
||||||
|
return colors[index];
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button className="p-0 m-0 w-9 h-9 bg-transparent border-none shadow-none outline-none hover:bg-transparent active:bg-transparent focus:ring-0 cursor-pointer">
|
<Button className="p-0 m-0 w-12 h-12 bg-transparent border-none shadow-none outline-none hover:bg-transparent active:bg-transparent focus:ring-0 cursor-pointer">
|
||||||
{user?.image ? (
|
{user?.image ? (
|
||||||
<Image
|
<Image
|
||||||
className="h-9 w-9 select-none rounded-full ring-1 ring-zinc-100/10 transition-opacity duration-300 hover:opacity-80"
|
className="h-12 w-12 select-none rounded-full ring-1 ring-zinc-100/10 transition-opacity duration-300 hover:opacity-80"
|
||||||
src={`${user.image}&s=60`}
|
src={`${user.image}&s=60`}
|
||||||
alt='User profile image'
|
alt='User profile image'
|
||||||
width={32}
|
width={32}
|
||||||
height={32}
|
height={32}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex h-9 w-9 shrink-0 select-none items-center justify-center rounded-full bg-muted/50 text-xs font-medium uppercase text-muted-foreground">
|
<div className="flex h-12 w-12 shrink-0 select-none items-center justify-center rounded-full bg-muted/50 text-xs font-medium uppercase text-muted-foreground">
|
||||||
|
style={{ backgroundColor: getRandomColor(user?.user_name) }}
|
||||||
{user?.user_name ? getUserInitials(user?.user_name.slice(0, 2)) : null}
|
{user?.user_name ? getUserInitials(user?.user_name.slice(0, 2)) : null}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue