43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import { Loader2, Image, Link, X } from 'lucide-react';
|
|
import type { Attachment } from './types';
|
|
|
|
type AttachmentListProps = {
|
|
attachments: Attachment[];
|
|
onRemove: (index: number) => void;
|
|
};
|
|
|
|
export function AttachmentList({ attachments, onRemove }: AttachmentListProps) {
|
|
if (attachments.length === 0) return null;
|
|
|
|
return (
|
|
<div className="mb-2 flex flex-wrap gap-1.5">
|
|
{attachments.map((a, i) => (
|
|
<span
|
|
key={i}
|
|
className="relative inline-flex items-center gap-1 px-2 py-1 text-xs bg-duck-teal/10 text-duck-teal rounded-md max-w-[240px] group"
|
|
>
|
|
{a.loading ? (
|
|
<Loader2 className="h-3 w-3 shrink-0 animate-spin" />
|
|
) : a.type === 'image' && a.dataUrl ? (
|
|
<img src={a.dataUrl} alt={a.filename} className="h-8 w-8 shrink-0 rounded object-cover" />
|
|
) : a.type === 'image' ? (
|
|
<Image className="h-3 w-3 shrink-0" />
|
|
) : (
|
|
<Link className="h-3 w-3 shrink-0" />
|
|
)}
|
|
<span className="truncate">
|
|
{a.type === 'image' ? a.filename : a.loading ? 'Loading...' : a.title}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => onRemove(i)}
|
|
className="shrink-0 hover:text-duck-dark cursor-pointer"
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
</span>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|