53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import Image from 'next/image';
|
|
import { mdiImageOutline } from '@mdi/js';
|
|
import BaseIcon from './BaseIcon';
|
|
|
|
type Props = {
|
|
name: string;
|
|
image?: Array<{ publicUrl?: string }> | 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 ? (
|
|
<div className='relative w-full h-full'>
|
|
<Image
|
|
src={imageSrc}
|
|
alt={name}
|
|
fill
|
|
sizes='100vw'
|
|
className={`rounded-full object-cover bg-gray-100 dark:bg-dark-900 ${imageClassName}`}
|
|
unoptimized
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className={'flex h-full bg-slate-100 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>
|
|
);
|
|
}
|