File Thumbnail Frame

1"use client";
2 
3import type * as React from "react";
4 
5import { cn } from "@/lib/utils";
6 
7import { getFileThumbnailExtension } from "./file-thumbnail-extension";
8import { FileThumbnailFallback } from "./file-thumbnail-fallback";
9import type {
10  FileThumbnailFrameProps,
11  FileThumbnailShape,
12  FileThumbnailSize,
13  FileThumbnailState,
14} from "./file-thumbnail-frame-types";
15import { FileThumbnailImage } from "./file-thumbnail-image";
16import { FileThumbnailShimmer } from "./file-thumbnail-shimmer";
17 
18export { FileThumbnailShimmer };
19export type {
20  FileThumbnailFrameProps,
21  FileThumbnailShape,
22  FileThumbnailSize,
23  FileThumbnailState,
24};
25 
26const FILE_THUMBNAIL_SIZE_CLASS_NAME: Record<FileThumbnailSize, string> = {
27  xs: "w-9",
28  sm: "w-10",
29  md: "w-12",
30  lg: "w-16",
31  xl: "w-20",
32};
33 
34const FILE_THUMBNAIL_SHAPE_ASPECT_RATIO: Record<FileThumbnailShape, string> = {
35  document: "3 / 4",
36  square: "1 / 1",
37};
38 
39/**
40 * The dependency-free thumbnail frame: loading shimmer, image fade-in,
41 * custom-rendered preview slot, and extension fallback.
42 */
43export function FileThumbnailFrame({
44  file,
45  className,
46  previewAspectRatio,
47  previewClassName,
48  previewContent,
49  previewImageUrl,
50  thumbnailShape,
51  thumbnailSize,
52  onPreviewError,
53  state,
54  style,
55  ...props
56}: FileThumbnailFrameProps) {
57  const extension = getFileThumbnailExtension(file);
58  const resolvedShape =
59    thumbnailShape ?? (previewAspectRatio === 1 ? "square" : "document");
60  const hasRenderableContent = hasRenderablePreviewContent(previewContent);
61  const resolvedState = resolveFileThumbnailState({
62    explicitState: state,
63    hasPreview: hasRenderableContent || Boolean(previewImageUrl),
64  });
65 
66  return (
67    <div
68      {...props}
69      data-slot="file-thumbnail"
70      data-thumbnail-shape={resolvedShape}
71      data-thumbnail-size={thumbnailSize}
72      className={cn(
73        "bg-muted text-muted-foreground relative overflow-hidden rounded-md border",
74        thumbnailSize
75          ? FILE_THUMBNAIL_SIZE_CLASS_NAME[thumbnailSize]
76          : undefined,
77        className,
78      )}
79      style={{
80        ...style,
81        aspectRatio:
82          style?.aspectRatio ??
83          (previewAspectRatio
84            ? formatFileThumbnailAspectRatio(previewAspectRatio)
85            : FILE_THUMBNAIL_SHAPE_ASPECT_RATIO[resolvedShape]),
86      }}
87    >
88      {resolvedState === "loading" ? (
89        <FileThumbnailShimmer />
90      ) : resolvedState === "error" ? (
91        <FileThumbnailFallback extension={extension} />
92// … truncated