UniqAI/bolt.diy
1
0
Fork 0
mirror of https://github.com/stackblitz-labs/bolt.diy synced 2025-05-03 11:51:36 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Update AvatarDropdown.tsx

Browse Source
This commit is contained in:
Stijnus 2025-02-02 23:50:15 +01:00
parent 23d253e7f8
commit f3468d495d
1 changed files with 13 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
app/components/@settings/core/AvatarDropdown.tsx
View File

@ -21,52 +21,24 @@ export const AvatarDropdown = ({ onSelectTab }: AvatarDropdownProps) => {
return ( return (
<DropdownMenu.Root> <DropdownMenu.Root>
<DropdownMenu.Trigger asChild> <DropdownMenu.Trigger asChild>
<motion.button className="group outline-none relative" whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}> <motion.button
{profile?.avatar ? ( className="w-10 h-10 rounded-full bg-transparent flex items-center justify-center focus:outline-none"
<div whileHover={{ scale: 1.02 }}
className={classNames( whileTap={{ scale: 0.98 }}
'w-10 h-10',
'rounded-full overflow-hidden',
'bg-white dark:bg-gray-800',
'transition-all duration-200',
'relative',
'shadow-sm',
)}
> >
{profile?.avatar ? (
<img <img
src={profile.avatar} src={profile.avatar}
alt={profile?.username || 'Profile'} alt={profile?.username || 'Profile'}
className={classNames( className="w-full h-full rounded-full object-cover"
'w-full h-full',
'object-cover',
'transform-gpu',
'image-rendering-crisp',
'group-hover:brightness-110',
'group-hover:scale-105',
'transition-all duration-200',
)}
loading="eager" loading="eager"
decoding="sync" decoding="sync"
/> />
</div>
) : ( ) : (
<div <div className="w-full h-full rounded-full flex items-center justify-center bg-white dark:bg-gray-800 text-gray-400 dark:text-gray-500">
className={classNames(
'w-10 h-10',
'rounded-full',
'flex items-center justify-center',
'bg-white dark:bg-gray-800',
'text-gray-400 dark:text-gray-500',
'group-hover:text-purple-500 dark:group-hover:text-purple-400',
'transition-all duration-200',
'shadow-sm',
)}
>
<div className="i-ph:question w-6 h-6" /> <div className="i-ph:question w-6 h-6" />
</div> </div>
)} )}
{/* Add subtle circular highlight effect */}
<div className="absolute inset-0 rounded-full bg-gradient-to-b from-white/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
</motion.button> </motion.button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>