import React, { ChangeEvent, FC, useCallback } from 'react'; import { Avatar } from '~/components/common/Avatar'; import { Button } from '~/components/input/Button'; import { ImagePresets } from '~/constants/urls'; import { IFile } from '~/types'; import { getURL } from '~/utils/dom'; import styles from './styles.module.scss'; export interface ProfileAvatarProps { size?: number; canEdit: boolean; photo?: IFile; onChangePhoto: (file: File) => void; } const ProfileAvatar: FC<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit, size, }) => { const onInputChange = useCallback( async (event: ChangeEvent<HTMLInputElement>) => { if (!event.target.files?.length) { return; } onChangePhoto(event.target.files[0]); }, [onChangePhoto], ); const backgroundImage = photo ? `url("${getURL(photo, ImagePresets.avatar)}")` : undefined; return ( <Avatar url={backgroundImage} size={size} className={styles.avatar}> {canEdit && <input type="file" onInput={onInputChange} />} {canEdit && ( <Button color="info" iconLeft="photo_add" round iconOnly className={styles.button} /> )} </Avatar> ); }; export { ProfileAvatar };