49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
// Why disabled:
|
|
// avatars.dicebear.com provides svg avatars
|
|
// next/image needs dangerouslyAllowSVG option for that
|
|
|
|
import React, { ReactNode } from 'react';
|
|
import BaseIcon from './BaseIcon';
|
|
import { mdiAccountCircleOutline } from '@mdi/js';
|
|
|
|
type Props = {
|
|
username: string;
|
|
avatar?: string | null;
|
|
image?: object | null;
|
|
api?: string;
|
|
className?: string;
|
|
children?: ReactNode;
|
|
};
|
|
|
|
export default function UserAvatar({
|
|
username,
|
|
image,
|
|
avatar,
|
|
className = '',
|
|
children,
|
|
}: Props) {
|
|
const avatarImage = image && image[0] ? `${image[0].publicUrl}` : '#';
|
|
|
|
return (
|
|
<div id='profilEdit' className={className}>
|
|
{avatarImage === '#' ? (
|
|
<BaseIcon
|
|
path={mdiAccountCircleOutline}
|
|
size={30}
|
|
className={
|
|
'dark:text-white dark:hover:text-slate-400 hover:text-black transition-colors'
|
|
}
|
|
/>
|
|
) : (
|
|
<img
|
|
src={avatarImage}
|
|
alt={username}
|
|
className='rounded-full block h-auto w-full max-w-full bg-gray-100 dark:bg-slate-800'
|
|
/>
|
|
)}
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|