47 lines
1.4 KiB
TypeScript
47 lines
1.4 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>
|
|
);
|
|
}
|