55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
|
import type { Attachment } from "@/lib/types";
|
||
|
|
import { Spinner } from "../ui/spinner";
|
||
|
|
import { CrossSmallIcon } from "./icons";
|
||
|
|
|
||
|
|
export const PreviewAttachment = ({
|
||
|
|
attachment,
|
||
|
|
isUploading = false,
|
||
|
|
onRemove,
|
||
|
|
}: {
|
||
|
|
attachment: Attachment;
|
||
|
|
isUploading?: boolean;
|
||
|
|
onRemove?: () => void;
|
||
|
|
}) => {
|
||
|
|
const { name, url, contentType } = attachment;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className="group relative h-24 w-24 shrink-0 overflow-hidden rounded-xl border border-border/40 bg-muted"
|
||
|
|
data-testid="input-attachment-preview"
|
||
|
|
>
|
||
|
|
{contentType?.startsWith("image") ? (
|
||
|
|
// eslint-disable-next-line @next/next/no-img-element
|
||
|
|
<img
|
||
|
|
alt={name ?? "attachment"}
|
||
|
|
className="size-full object-cover"
|
||
|
|
src={url}
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
<div className="flex size-full items-center justify-center text-muted-foreground text-xs">
|
||
|
|
File
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{isUploading && (
|
||
|
|
<div
|
||
|
|
className="absolute inset-0 flex items-center justify-center rounded-xl bg-black/40 backdrop-blur-sm"
|
||
|
|
data-testid="input-attachment-loader"
|
||
|
|
>
|
||
|
|
<Spinner className="size-5" />
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{onRemove && !isUploading && (
|
||
|
|
<button
|
||
|
|
className="absolute top-1.5 right-1.5 flex size-5 items-center justify-center rounded-full bg-black/60 text-white opacity-0 backdrop-blur-sm transition-opacity hover:bg-black/80 group-hover:opacity-100"
|
||
|
|
onClick={onRemove}
|
||
|
|
type="button"
|
||
|
|
>
|
||
|
|
<CrossSmallIcon size={10} />
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|