1  'use client'
 2  
 3  import type { PendingFile } from '@/stores/use-chat-store'
 4  
 5  export function FilePreview({ file, onRemove }: { file: PendingFile; onRemove: () => void }) {
 6    const isImage = file.file.type.startsWith('image/')
 7    return (
 8      <div className="relative">
 9        {isImage ? (
10          <img
11            src={URL.createObjectURL(file.file)}
12            alt="Preview"
13            className="h-16 rounded-[10px] object-cover border border-white/[0.06]"
14          />
15        ) : (
16          <div className="flex items-center gap-2.5 px-3 py-2.5 rounded-[10px] border border-white/[0.06] bg-white/[0.03]">
17            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-text-3 shrink-0">
18              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
19              <polyline points="14 2 14 8 20 8" />
20            </svg>
21            <span className="text-[13px] text-text-2 font-500 truncate max-w-[180px]">{file.file.name}</span>
22          </div>
23        )}
24        <button
25          onClick={onRemove}
26          className="absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full border border-white/10 bg-raised
27            text-text-2 text-[10px] cursor-pointer flex items-center justify-center
28            hover:bg-danger-soft hover:text-danger hover:border-danger/20 transition-colors"
29        >
30          &times;
31        </button>
32      </div>
33    )
34  }