mango-ui-v3/components/ProfileImageButton.tsx

56 lines
1.7 KiB
TypeScript

import { PencilIcon } from '@heroicons/react/outline'
import { useCallback, useState } from 'react'
import useMangoStore from 'stores/useMangoStore'
import NftProfilePicModal from './NftProfilePicModal'
import ProfileImage from './ProfileImage'
const ProfileImageButton = ({
disabled,
imageSize,
placeholderSize,
imageUrl,
}: {
disabled: boolean
imageSize: string
placeholderSize: string
imageUrl?: string
}) => {
const [showProfilePicModal, setShowProfilePicModal] = useState(false)
const profile = useMangoStore((s) => s.profile.details)
const handleCloseProfilePicModal = useCallback(() => {
setShowProfilePicModal(false)
}, [])
return (
<>
<button
disabled={disabled}
className="relative mb-2 mr-4 flex items-center justify-center rounded-full sm:mb-0"
onClick={() => setShowProfilePicModal(true)}
style={{ width: `${imageSize}px`, height: `${imageSize}px` }}
>
<ProfileImage
imageSize={imageSize}
placeholderSize={placeholderSize}
imageUrl={(imageUrl !== profile.profile_image_url && imageUrl) || ''}
isOwnerProfile={imageUrl === profile.profile_image_url}
/>
{!disabled ? (
<div className="default-transition absolute bottom-0 top-0 left-0 right-0 flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-[rgba(0,0,0,0.6)] opacity-0 hover:opacity-100">
<PencilIcon className="h-5 w-5 text-th-fgd-1" />
</div>
) : null}
</button>
{showProfilePicModal ? (
<NftProfilePicModal
isOpen={showProfilePicModal}
onClose={handleCloseProfilePicModal}
/>
) : null}
</>
)
}
export default ProfileImageButton