Spaces:
Sleeping
Sleeping
| import { Image, X } from "lucide-react"; | |
| import { formatFileSize } from "../utils/formatters"; | |
| export default function ImagePreview({ file, previewUrl, onReset }) { | |
| if (!previewUrl) return null; | |
| return ( | |
| <div className="bg-white border border-slate-200 rounded-2xl shadow-sm overflow-hidden"> | |
| <div className="p-3 border-b border-slate-100 flex items-center justify-between"> | |
| <div className="flex items-center gap-2 text-sm text-slate-600 min-w-0"> | |
| <Image className="w-4 h-4 text-slate-400 shrink-0" /> | |
| <span className="truncate">{file?.name || "Captured image"}</span> | |
| {file?.size && ( | |
| <span className="text-slate-400 shrink-0"> | |
| ({formatFileSize(file.size)}) | |
| </span> | |
| )} | |
| </div> | |
| <button | |
| onClick={onReset} | |
| className="text-slate-400 hover:text-red-500 transition-colors cursor-pointer" | |
| > | |
| <X className="w-4 h-4" /> | |
| </button> | |
| </div> | |
| <img | |
| src={previewUrl} | |
| alt="Preview gambar" | |
| className="w-full object-contain max-h-80 bg-slate-50" | |
| /> | |
| </div> | |
| ); | |
| } | |