Carlos Florêncio
35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { toRelativePath } from "@/lib/utils";
|
|
import { getImageMimeType } from "@/lib/utils/file-types";
|
|
|
|
type FileImageViewerProps = {
|
|
path: string;
|
|
content: string; // base64-encoded
|
|
worktreePath?: string;
|
|
};
|
|
|
|
export function FileImageViewer({ path, content, worktreePath }: FileImageViewerProps) {
|
|
const mime = getImageMimeType(path);
|
|
const src = `data:${mime};base64,${content}`;
|
|
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<div className="flex items-center px-2 border-foreground/10 border-b">
|
|
<div className="flex items-center gap-2 text-xs text-muted-foreground py-2">
|
|
<span className="font-mono">{toRelativePath(path, worktreePath)}</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 flex items-center justify-center overflow-auto p-6">
|
|
{/* eslint-disable-next-line @next/next/no-img-element -- dynamic blob/data URLs from the agent workspace */}
|
|
<img
|
|
src={src}
|
|
alt={path}
|
|
className="max-w-full max-h-full object-contain rounded"
|
|
draggable={false}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|