UniqAI/bolt.new
1
0
Fork 0
mirror of https://github.com/stackblitz/bolt.new synced 2025-02-06 04:48:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

adjusting spaces for X button in file-preview

Browse Source
This commit is contained in:
Andrew Trokhymenko 2024-11-30 00:04:53 -05:00
parent 7cdb56a847
commit ccaa67b6b2
1 changed files with 4 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/components/chat/FilePreview.tsx
View File

@ -1,7 +1,5 @@
// Remove the lucide-react import
import React from 'react'; import React from 'react';
// Rest of the interface remains the same
interface FilePreviewProps { interface FilePreviewProps {
files: File[]; files: File[];
imageDataList: string[]; imageDataList: string[];
@ -14,19 +12,17 @@ const FilePreview: React.FC<FilePreviewProps> = ({ files, imageDataList, onRemov
} }
return ( return (
<div className="flex flex-row overflow-x-auto"> <div className="flex flex-row overflow-x-auto -mt-2">
{files.map((file, index) => ( {files.map((file, index) => (
<div key={file.name + file.size} className="mr-2 relative"> <div key={file.name + file.size} className="mr-2 relative">
{imageDataList[index] && ( {imageDataList[index] && (
<div className="relative"> <div className="relative pt-4 pr-4">
<img src={imageDataList[index]} alt={file.name} className="max-h-20" /> <img src={imageDataList[index]} alt={file.name} className="max-h-20" />
<button <button
onClick={() => onRemove(index)} 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-200" />
<div className="i-ph:x w-3 h-3 text-gray-400" />
</div>
</button> </button>
</div> </div>
)} )}