adjusting spaces for X button in file-preview

This commit is contained in:
Andrew Trokhymenko 2024-11-30 00:04:53 -05:00
parent 7cdb56a847
commit ccaa67b6b2

View File

@ -1,7 +1,5 @@
// Remove the lucide-react import
import React from 'react';
// Rest of the interface remains the same
interface FilePreviewProps {
files: File[];
imageDataList: string[];
@ -14,19 +12,17 @@ const FilePreview: React.FC<FilePreviewProps> = ({ files, imageDataList, onRemov
}
return (
<div className="flex flex-row overflow-x-auto">
<div className="flex flex-row overflow-x-auto -mt-2">
{files.map((file, index) => (
<div key={file.name + file.size} className="mr-2 relative">
{imageDataList[index] && (
<div className="relative">
<div className="relative pt-4 pr-4">
<img src={imageDataList[index]} alt={file.name} className="max-h-20" />
<button
onClick={() => onRemove(index)}
className="absolute -top-2 -right-2 z-10 bg-white rounded-full p-1 shadow-md hover:bg-gray-100"
className="absolute top-1 right-1 z-10 bg-black rounded-full w-5 h-5 shadow-md hover:bg-gray-900 transition-colors flex items-center justify-center"
>
<div className="bg-black rounded-full p-1">
<div className="i-ph:x w-3 h-3 text-gray-400" />
</div>
<div className="i-ph:x w-3 h-3 text-gray-200" />
</button>
</div>
)}