52 lines
1.2 KiB
TypeScript
52 lines
1.2 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 { mdiImageOutline } from '@mdi/js';
|
|
import BaseIcon from './BaseIcon';
|
|
|
|
type Props = {
|
|
name: string;
|
|
image?: object | null;
|
|
api?: string;
|
|
className?: string;
|
|
imageClassName?: string;
|
|
children?: ReactNode;
|
|
};
|
|
|
|
export default function ImageField({
|
|
name,
|
|
image,
|
|
className = '',
|
|
imageClassName = '',
|
|
children,
|
|
}: Props) {
|
|
const imageSrc = image && image[0] ? `${image[0].publicUrl}` : '';
|
|
|
|
return (
|
|
<div className={className}>
|
|
{imageSrc ? (
|
|
<img
|
|
src={imageSrc}
|
|
alt={name}
|
|
className={`rounded-full block h-auto w-full max-w-full bg-gray-100 dark:bg-dark-900 ${imageClassName}`}
|
|
/>
|
|
) : (
|
|
<div className={'flex h-full dark:bg-dark-900/70'}>
|
|
<BaseIcon
|
|
className='text-black dark:text-white'
|
|
w='w-full'
|
|
h='h-full'
|
|
size={54}
|
|
path={mdiImageOutline}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|