40 lines
1.5 KiB
TypeScript
40 lines
1.5 KiB
TypeScript
import { formatFileSize } from '@renderer/utils/attachmentUtils';
|
|
import { X } from 'lucide-react';
|
|
|
|
import { AttachmentThumbnail } from './AttachmentThumbnail';
|
|
|
|
import type { AttachmentPayload } from '@shared/types';
|
|
|
|
interface AttachmentPreviewItemProps {
|
|
attachment: AttachmentPayload;
|
|
onRemove: (id: string) => void;
|
|
}
|
|
|
|
export const AttachmentPreviewItem = ({
|
|
attachment,
|
|
onRemove,
|
|
}: AttachmentPreviewItemProps): React.JSX.Element => {
|
|
const dataUrl = `data:${attachment.mimeType};base64,${attachment.data}`;
|
|
|
|
return (
|
|
<div className="group/att relative flex shrink-0 items-center gap-2 rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] p-1.5">
|
|
<AttachmentThumbnail src={dataUrl} alt={attachment.filename} size="sm" />
|
|
<div className="flex min-w-0 flex-col gap-0.5">
|
|
<span className="max-w-[100px] truncate text-[11px] text-[var(--color-text-secondary)]">
|
|
{attachment.filename}
|
|
</span>
|
|
<span className="text-[10px] text-[var(--color-text-muted)]">
|
|
{formatFileSize(attachment.size)}
|
|
</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="absolute -right-1.5 -top-1.5 flex size-4 items-center justify-center rounded-full bg-red-500 text-white opacity-0 transition-opacity group-hover/att:opacity-100"
|
|
onClick={() => onRemove(attachment.id)}
|
|
aria-label={`Remove ${attachment.filename}`}
|
|
>
|
|
<X size={10} />
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|