48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
import { LoaderIcon } from './icons';
|
|
import cn from 'classnames';
|
|
|
|
interface ImageEditorProps {
|
|
title: string;
|
|
content: string;
|
|
isCurrentVersion: boolean;
|
|
currentVersionIndex: number;
|
|
status: string;
|
|
isInline: boolean;
|
|
}
|
|
|
|
export function ImageEditor({
|
|
title,
|
|
content,
|
|
status,
|
|
isInline,
|
|
}: ImageEditorProps) {
|
|
return (
|
|
<div
|
|
className={cn('flex w-full flex-row items-center justify-center', {
|
|
'h-[calc(100dvh-60px)]': !isInline,
|
|
'h-[200px]': isInline,
|
|
})}
|
|
>
|
|
{status === 'streaming' ? (
|
|
<div className="flex flex-row items-center gap-4">
|
|
{!isInline && (
|
|
<div className="animate-spin">
|
|
<LoaderIcon />
|
|
</div>
|
|
)}
|
|
<div>Generating Image...</div>
|
|
</div>
|
|
) : (
|
|
<picture>
|
|
<img
|
|
className={cn('h-fit w-full max-w-[800px]', {
|
|
'p-0 md:p-20': !isInline,
|
|
})}
|
|
src={`data:image/png;base64,${content}`}
|
|
alt={title}
|
|
/>
|
|
</picture>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|