alisaza
5404974c32
- Updated `TextEditor` component to use consistent class names for dropdown triggers, enhancing maintainability. - Refactored `Dropdown` component to resolve trigger properties more reliably, ensuring proper rendering of button-like triggers. - Modified `UserDropdown` to utilize `buttonVariants` for styling the dropdown trigger, improving visual consistency across components.
82 lines
2.4 KiB
TypeScript
82 lines
2.4 KiB
TypeScript
'use client'
|
||
import { useRouter } from 'next/navigation'
|
||
import { useMemo } from 'react'
|
||
import { buttonVariants } from '@heroui/react'
|
||
|
||
import { Dropdown, DropdownItem, DropdownMenu, DropdownSection, DropdownTrigger } from '@/components/heroui/Dropdown'
|
||
import { Avatar } from '@/components/heroui/Avatar'
|
||
import LogoutIcon from '@/components/icons/LogoutIcon'
|
||
import { fileAddress } from '@/helpers'
|
||
import { resolveUserAvatarSrc } from '@/lib/resolveUserAvatarSrc'
|
||
import useAuth from '@/hooks/useAuth'
|
||
import useAlertModal from '@/hooks/useAlertModal'
|
||
import EditIcon from '@/components/icons/EditIcon'
|
||
import { cn } from '@/lib/cn'
|
||
|
||
const UserDropdown = () => {
|
||
const { user, logout } = useAuth()
|
||
const { showAlert } = useAlertModal()
|
||
const router = useRouter()
|
||
const disableKeys = useMemo(() => [], [])
|
||
const avatarSrc = resolveUserAvatarSrc({
|
||
avatarUrl: user?.avatarUrl ?? (user?.imageId ? fileAddress(user.imageId) : null),
|
||
gender: user?.gender,
|
||
})
|
||
|
||
return (
|
||
<>
|
||
<Dropdown placement="bottom-start">
|
||
<DropdownTrigger
|
||
aria-label="منوی حساب کاربری"
|
||
className={cn(
|
||
buttonVariants({
|
||
isIconOnly: true,
|
||
size: 'lg',
|
||
variant: 'tertiary',
|
||
}),
|
||
'rounded-full p-0 outline-none'
|
||
)}
|
||
>
|
||
<Avatar
|
||
isBordered
|
||
color="default"
|
||
size="lg"
|
||
src={avatarSrc}
|
||
/>
|
||
</DropdownTrigger>
|
||
|
||
<DropdownMenu
|
||
aria-label="User Actions"
|
||
disabledKeys={disableKeys}
|
||
variant="flat"
|
||
>
|
||
<DropdownSection showDivider>
|
||
<DropdownItem
|
||
key="profile"
|
||
startContent={<EditIcon className="size-4" />}
|
||
onPress={() => {
|
||
router.push('/profile/edit')
|
||
}}
|
||
>
|
||
ویرایش پروفایل
|
||
</DropdownItem>
|
||
</DropdownSection>
|
||
<DropdownItem
|
||
key="logout"
|
||
className="text-fourth"
|
||
color="danger"
|
||
startContent={<LogoutIcon className="size-4" />}
|
||
onPress={() => {
|
||
showAlert('برای خروج مطمئن هستید؟', logout)
|
||
}}
|
||
>
|
||
خروج
|
||
</DropdownItem>
|
||
</DropdownMenu>
|
||
</Dropdown>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default UserDropdown
|