File Thumbnail

1"use client";
2 
3import { FileIcon } from "blode-icons-react";
4import * as React from "react";
5 
6import { cn } from "@/lib/utils";
7 
8interface FileThumbnailProps extends Omit<React.ComponentProps<"div">, "style"> {
9  /** The file to preview. Images render a thumbnail; everything else shows a
10   *  file icon with the truncated filename. */
11  file: File;
12  /** Side length of the square tile in pixels. Defaults to 64. */
13  size?: number;
14}
15 
16// ─── FileThumbnail ──────────────────────────────────────────────────────────
17// A square preview tile for an attached file. Images render via an object URL
18// (revoked on unmount); all other types fall back to a file icon + name. No
19// PDF rasterization — keeps the component dependency-free.
20const FileThumbnail = ({ file, size = 64, className, ...props }: FileThumbnailProps) => {
21  const isImage = file.type.startsWith("image/");
22  const url = React.useMemo(() => (isImage ? URL.createObjectURL(file) : null), [file, isImage]);
23 
24  React.useEffect(() => {
25    if (!url) {
26      return;
27    }
28    return () => URL.revokeObjectURL(url);
29  }, [url]);
30 
31  return (
32    <div
33      className={cn(
34        "relative flex shrink-0 flex-col items-center justify-center gap-1 overflow-hidden rounded-xl border border-border bg-card",
35        className,
36      )}
37      data-slot="file-thumbnail"
38      style={{ height: size, width: size }}
39      {...props}
40    >
41      {isImage && url ? (
42        // eslint-disable-next-line next/no-img-element -- object-URL blob preview, not a remote asset
43        <img alt={file.name} className="h-full w-full object-cover" src={url} />
44      ) : (
45        <>
46          <FileIcon className="size-5 text-muted-foreground" />
47          <span className="max-w-full truncate px-1.5 text-[10px] text-muted-foreground leading-none">
48            {file.name}
49          </span>
50        </>
51      )}
52    </div>
53  );
54};
55 
56export { FileThumbnail };
57export type { FileThumbnailProps };