Keep/keep-notes/components/editor-images.tsx

34 lines
911 B
TypeScript

import { Button } from "@/components/ui/button"
import { X } from "lucide-react"
interface EditorImagesProps {
images: string[]
onRemove: (index: number) => void
}
export function EditorImages({ images, onRemove }: EditorImagesProps) {
if (!images || images.length === 0) return null
return (
<div className="flex flex-col gap-3 mb-4">
{images.map((img, idx) => (
<div key={idx} className="relative group">
<img
src={img}
alt=""
className="h-auto rounded-lg"
/>
<Button
variant="ghost"
size="sm"
className="absolute top-2 right-2 h-7 w-7 p-0 bg-white/90 hover:bg-white opacity-0 group-hover:opacity-100 transition-opacity"
onClick={() => onRemove(idx)}
>
<X className="h-4 w-4" />
</Button>
</div>
))}
</div>
)
}