@morphika/andami 0.1.2

package/components/builder/VirtualAssetGrid.tsx

@@ -0,0 +1,397 @@
+"use client";
+
+/**
+ * VirtualAssetGrid — Virtualized grid for large asset collections.
+ * Renders only visible rows + buffer for smooth scrolling with hundreds
+ * or thousands of assets. Zero external dependencies.
+ *
+ * Designed to sit inside an existing scrollable parent (overflow-y-auto).
+ * Finds the closest scrollable ancestor and observes its scroll position.
+ *
+ * Session 65: New file, replaces direct filteredAssets.map() in
+ * R2BrowserContent.
+ */
+
+import { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import type { RegisteredAsset } from "../../lib/sanity/types";
+import { BREAKPOINTS } from "../../lib/builder/constants";
+
+// ============================================
+// Types
+// ============================================
+
+interface VirtualAssetGridProps {
+  assets: RegisteredAsset[];
+  selectedAsset: RegisteredAsset | null;
+  selectedAssets: RegisteredAsset[];
+  multiSelect: boolean;
+  setSelectedAsset: (asset: RegisteredAsset | null) => void;
+  setSelectedAssets?: (assets: RegisteredAsset[]) => void;
+  onDoubleClick: (asset: RegisteredAsset) => void;
+  onContextMenu?: (e: React.MouseEvent, asset: RegisteredAsset) => void;
+  renderThumbnail: (asset: RegisteredAsset) => React.ReactNode;
+  isImageType: (ext: string) => boolean;
+}
+
+// ============================================
+// Constants
+// ============================================
+
+/** Grid gap in pixels (Tailwind gap-3 = 12px) */
+const GRID_GAP = 12;
+
+/** Extra height below the square thumbnail for filename label */
+const LABEL_HEIGHT = 30;
+
+/** Number of extra rows to render above/below the viewport */
+const OVERSCAN = 3;
+
+/**
+ * Threshold: only virtualize when assets exceed this count.
+ * Below this, render all items normally for simplicity.
+ */
+const VIRTUALIZE_THRESHOLD = 50;
+
+// ============================================
+// Helpers
+// ============================================
+
+/** Find the closest scrollable ancestor of an element */
+function findScrollParent(el: HTMLElement | null): HTMLElement | null {
+  let current = el?.parentElement;
+  while (current) {
+    const style = getComputedStyle(current);
+    if (
+      style.overflowY === "auto" ||
+      style.overflowY === "scroll" ||
+      style.overflow === "auto" ||
+      style.overflow === "scroll"
+    ) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+}
+
+/** Compute column count from container width (matches Tailwind breakpoints) */
+function getColumnCount(containerWidth: number): number {
+  if (containerWidth >= BREAKPOINTS.tablet) return 7; // lg:grid-cols-7
+  if (containerWidth >= BREAKPOINTS.mobileAnimation) return 5;  // md:grid-cols-5
+  return 3;                              // grid-cols-3
+}
+
+// ============================================
+// VirtualAssetGrid Component
+// ============================================
+
+export function VirtualAssetGrid({
+  assets,
+  selectedAsset,
+  selectedAssets,
+  multiSelect,
+  setSelectedAsset,
+  setSelectedAssets,
+  onDoubleClick,
+  onContextMenu,
+  renderThumbnail,
+  isImageType,
+}: VirtualAssetGridProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [visibleRange, setVisibleRange] = useState({ start: 0, end: 50 });
+
+  // Below threshold: render everything, no virtualization
+  const shouldVirtualize = assets.length > VIRTUALIZE_THRESHOLD;
+
+  // Observe container width via ResizeObserver
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) setContainerWidth(entry.contentRect.width);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  // Derived layout calculations
+  const columns = useMemo(() => getColumnCount(containerWidth), [containerWidth]);
+
+  const itemWidth = useMemo(
+    () => containerWidth > 0 ? (containerWidth - GRID_GAP * (columns - 1)) / columns : 0,
+    [containerWidth, columns]
+  );
+
+  const rowHeight = useMemo(
+    () => itemWidth + LABEL_HEIGHT + GRID_GAP,
+    [itemWidth]
+  );
+
+  const totalRows = useMemo(
+    () => Math.ceil(assets.length / columns),
+    [assets.length, columns]
+  );
+
+  const totalHeight = useMemo(
+    () => totalRows > 0 ? totalRows * rowHeight - GRID_GAP : 0,
+    [totalRows, rowHeight]
+  );
+
+  // Observe scroll position of the closest scrollable ancestor
+  useEffect(() => {
+    if (!shouldVirtualize) return;
+
+    const el = containerRef.current;
+    if (!el) return;
+
+    const scrollParent = findScrollParent(el);
+    if (!scrollParent) return;
+
+    let rafId = 0;
+
+    const updateVisibleRange = () => {
+      const parentRect = scrollParent.getBoundingClientRect();
+      const elRect = el.getBoundingClientRect();
+
+      // How far the grid top is above (negative) or below (positive) the viewport top
+      const offsetTop = elRect.top - parentRect.top;
+      const viewportHeight = parentRect.height;
+
+      if (rowHeight <= 0) return;
+
+      // First visible row
+      const firstVisible = Math.floor(Math.max(0, -offsetTop) / rowHeight);
+      // Last visible row
+      const lastVisible = Math.ceil(Math.max(0, -offsetTop + viewportHeight) / rowHeight);
+
+      const startRow = Math.max(0, firstVisible - OVERSCAN);
+      const endRow = Math.min(totalRows, lastVisible + OVERSCAN);
+
+      setVisibleRange({
+        start: startRow * columns,
+        end: endRow * columns,
+      });
+    };
+
+    const handleScroll = () => {
+      if (rafId) return;
+      rafId = requestAnimationFrame(() => {
+        updateVisibleRange();
+        rafId = 0;
+      });
+    };
+
+    // Initial calculation
+    updateVisibleRange();
+
+    scrollParent.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      scrollParent.removeEventListener("scroll", handleScroll);
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  }, [shouldVirtualize, rowHeight, totalRows, columns]);
+
+  const handleItemClick = useCallback(
+    (asset: RegisteredAsset) => {
+      if (multiSelect && setSelectedAssets) {
+        const isSelected = selectedAssets.some((a) => a._key === asset._key);
+        if (isSelected) {
+          setSelectedAssets(selectedAssets.filter((a) => a._key !== asset._key));
+        } else {
+          setSelectedAssets([...selectedAssets, asset]);
+        }
+      } else {
+        setSelectedAsset(asset);
+      }
+    },
+    [multiSelect, selectedAssets, setSelectedAssets, setSelectedAsset]
+  );
+
+  if (assets.length === 0) return null;
+
+  // Non-virtualized: render all items in a simple CSS grid
+  if (!shouldVirtualize) {
+    return (
+      <div
+        ref={containerRef}
+        className="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-7 gap-3"
+      >
+        {assets.map((asset) => (
+          <AssetGridItem
+            key={asset._key}
+            asset={asset}
+            isSelected={
+              multiSelect
+                ? selectedAssets.some((a) => a._key === asset._key)
+                : selectedAsset?._key === asset._key
+            }
+            multiSelect={multiSelect}
+            onClick={handleItemClick}
+            onDoubleClick={onDoubleClick}
+            onContextMenu={onContextMenu}
+            renderThumbnail={renderThumbnail}
+            isImageType={isImageType}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  // Virtualized: absolute positioning within a fixed-height container
+  const startRow = Math.floor(visibleRange.start / columns);
+
+  return (
+    <div
+      ref={containerRef}
+      style={{ height: totalHeight, position: "relative" }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          top: startRow * rowHeight,
+          left: 0,
+          right: 0,
+        }}
+      >
+        <div
+          className="grid gap-3"
+          style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}
+        >
+          {assets.slice(visibleRange.start, visibleRange.end).map((asset) => (
+            <AssetGridItem
+              key={asset._key}
+              asset={asset}
+              isSelected={
+                multiSelect
+                  ? selectedAssets.some((a) => a._key === asset._key)
+                  : selectedAsset?._key === asset._key
+              }
+              multiSelect={multiSelect}
+              onClick={handleItemClick}
+              onDoubleClick={onDoubleClick}
+              onContextMenu={onContextMenu}
+              renderThumbnail={renderThumbnail}
+              isImageType={isImageType}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ============================================
+// AssetGridItem — Individual grid item
+// ============================================
+
+interface AssetGridItemProps {
+  asset: RegisteredAsset;
+  isSelected: boolean | undefined;
+  multiSelect: boolean;
+  onClick: (asset: RegisteredAsset) => void;
+  onDoubleClick: (asset: RegisteredAsset) => void;
+  onContextMenu?: (e: React.MouseEvent, asset: RegisteredAsset) => void;
+  renderThumbnail: (asset: RegisteredAsset) => React.ReactNode;
+  isImageType: (ext: string) => boolean;
+}
+
+function AssetGridItem({
+  asset,
+  isSelected,
+  multiSelect,
+  onClick,
+  onDoubleClick,
+  onContextMenu,
+  renderThumbnail,
+  isImageType,
+}: AssetGridItemProps) {
+  return (
+    <button
+      onClick={() => onClick(asset)}
+      onDoubleClick={() => !multiSelect && onDoubleClick(asset)}
+      onContextMenu={onContextMenu ? (e) => onContextMenu(e, asset) : undefined}
+      className={`relative flex flex-col rounded-lg overflow-hidden transition-all ${
+        isSelected
+          ? "ring-2 ring-[#076bff] ring-offset-2 shadow-lg"
+          : "hover:shadow-md"
+      }`}
+    >
+      {/* Multi-select checkbox indicator */}
+      {multiSelect && (
+        <div
+          className={`absolute top-1.5 left-1.5 z-10 w-5 h-5 rounded flex items-center justify-center text-white text-[10px] font-bold transition-colors ${
+            isSelected ? "bg-[#076bff]" : "bg-black/30 border border-white/50"
+          }`}
+        >
+          {isSelected && (
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="3"
+            >
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+          )}
+        </div>
+      )}
+      <div className="aspect-square bg-neutral-100 overflow-hidden relative">
+        {renderThumbnail(asset)}
+        {/* Thumbnail status badge — raster images only */}
+        {isImageType(asset.extension) && asset.extension !== "svg" && (
+          <div
+            className={`absolute bottom-1.5 right-1.5 w-4 h-4 rounded-full flex items-center justify-center backdrop-blur-sm ${
+              asset.has_thumbnail ? "bg-green-500/80" : "bg-amber-500/80"
+            }`}
+            title={
+              asset.has_thumbnail
+                ? "Thumbnail available"
+                : "No thumbnail — loading full resolution"
+            }
+          >
+            {asset.has_thumbnail ? (
+              <svg
+                width="9"
+                height="9"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="white"
+                strokeWidth="3.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            ) : (
+              <svg
+                width="9"
+                height="9"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="white"
+                strokeWidth="3.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <line x1="12" y1="8" x2="12" y2="12" />
+                <circle cx="12" cy="16" r="0.5" fill="white" />
+              </svg>
+            )}
+          </div>
+        )}
+      </div>
+      <div className="px-1 py-1.5 bg-white">
+        <p className="text-[11px] text-neutral-500 truncate text-center">
+          {asset.filename.length > 16
+            ? `...${asset.filename.slice(-14)}`
+            : asset.filename}
+        </p>
+      </div>
+    </button>
+  );
+}

package/components/builder/asset-browser/AssetBrowser.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import type { RegisteredAsset } from "../../../lib/sanity/types";
+import { useThumbStatus } from "../../../lib/contexts/ThumbStatusContext";
+import type { AssetBrowserProps, AssetBrowserInlineProps } from "./types";
+import { formatFileSize } from "./helpers";
+import { R2BrowserContent } from "./R2BrowserContent";
+import { useAssetBrowser } from "./useAssetBrowser";
+
+// ============================================
+// Modal AssetBrowser (used in page editor)
+// ============================================
+
+export default function AssetBrowser({
+  open,
+  onSelect,
+  onClose,
+  filterType = "all",
+  multiSelect = false,
+  onSelectMultiple,
+}: AssetBrowserProps) {
+  const { refresh: refreshThumbStatus } = useThumbStatus();
+  const browser = useAssetBrowser(undefined, refreshThumbStatus);
+  const [selectedAssets, setSelectedAssets] = useState<RegisteredAsset[]>([]);
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  // NOTE: We no longer use native stopPropagation on this modal div.
+  // That approach blocked React 18's event delegation (which runs on
+  // document.body for portals), preventing onChange from firing on inputs
+  // like the "create folder" text field.  Instead, the builder's global
+  // keyboard handlers (page editor + BuilderCanvas) check for
+  // [data-asset-modal] via .closest() and bail early.
+
+  useEffect(() => {
+    if (open) {
+      browser.fetchAssets();
+      browser.checkProviderStatus();
+      browser.setSelectedAsset(null);
+      browser.setSearchQuery("");
+      setSelectedAssets([]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  const handleSelect = () => {
+    if (multiSelect && onSelectMultiple) {
+      if (selectedAssets.length > 0) {
+        onSelectMultiple(selectedAssets.map((a) => a.path));
+        onClose();
+      }
+    } else if (browser.selectedAsset) {
+      onSelect(browser.selectedAsset.path);
+      onClose();
+    }
+  };
+
+  const handleDoubleClick = (asset: RegisteredAsset) => {
+    onSelect(asset.path); onClose();
+  };
+
+  if (!open) return null;
+
+  const hasSelection = multiSelect ? selectedAssets.length > 0 : !!browser.selectedAsset;
+  const selectionLabel = multiSelect && selectedAssets.length > 0
+    ? `${selectedAssets.length} image${selectedAssets.length !== 1 ? "s" : ""} selected`
+    : browser.selectedAsset
+      ? `${browser.selectedAsset.filename} · ${formatFileSize(browser.selectedAsset.file_size)}`
+      : "";
+
+  return createPortal(
+    <div
+      ref={modalRef}
+      data-asset-modal
+      className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 backdrop-blur-sm"
+    >
+      <form onSubmit={(e) => { e.preventDefault(); e.stopPropagation(); }} className="contents">
+      <div className="bg-white rounded-xl shadow-2xl w-[1000px] max-w-[95vw] h-[650px] max-h-[90vh] flex flex-col overflow-hidden">
+        <R2BrowserContent
+          assets={browser.assets}
+          loading={browser.loading}
+          error={browser.error}
+          currentFolder={browser.currentFolder}
+          setCurrentFolder={browser.setCurrentFolder}
+          selectedAsset={browser.selectedAsset}
+          setSelectedAsset={browser.setSelectedAsset}
+          onRetry={browser.fetchAssets}
+          onDoubleClick={multiSelect ? undefined : handleDoubleClick}
+          filterType={filterType}
+          multiSelect={multiSelect}
+          selectedAssets={selectedAssets}
+          setSelectedAssets={setSelectedAssets}
+          uploading={browser.uploading}
+          onUpload={browser.handleUpload}
+          onClearUploadError={browser.clearUploadError}
+          searchQuery={browser.searchQuery}
+          setSearchQuery={browser.setSearchQuery}
+          onMutationComplete={refreshThumbStatus}
+          onFolderCreated={browser.addSyntheticFolder}
+        />
+
+        {/* Footer */}
+        <div className="flex items-center justify-between px-5 py-3 border-t border-neutral-200 bg-white">
+          <span className="text-xs text-neutral-400">
+            {browser.assets.length} file{browser.assets.length !== 1 ? "s" : ""}
+            {selectionLabel && (
+              <> &middot; <span className="text-neutral-600">{selectionLabel}</span></>
+            )}
+          </span>
+          <div className="flex gap-3">
+            <button
+              onClick={onClose}
+              className="text-xs px-5 py-2 text-neutral-500 hover:text-neutral-800 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSelect}
+              disabled={!hasSelection}
+              className="text-xs px-5 py-2 rounded-lg bg-neutral-200 text-neutral-400 transition-colors disabled:cursor-not-allowed enabled:bg-brand-accent-alt enabled:text-neutral-900 enabled:hover:bg-brand-accent"
+            >
+              Insert Media{multiSelect && selectedAssets.length > 1 ? ` (${selectedAssets.length})` : ""}
+            </button>
+          </div>
+        </div>
+      </div>
+      </form>
+    </div>,
+    document.body
+  );
+}
+
+// ============================================
+// Inline AssetBrowser (used in /admin/storage)
+// ============================================
+
+export function AssetBrowserInline({ refreshKey, onScanComplete }: AssetBrowserInlineProps) {
+  const browser = useAssetBrowser(onScanComplete);
+
+  useEffect(() => {
+    browser.fetchAssets();
+    browser.checkProviderStatus();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [refreshKey]);
+
+  return (
+    <div className="border border-neutral-200 rounded-xl bg-white overflow-hidden flex flex-col" style={{ height: "560px" }}>
+      <R2BrowserContent
+        assets={browser.assets}
+        loading={browser.loading}
+        error={browser.error}
+        currentFolder={browser.currentFolder}
+        setCurrentFolder={browser.setCurrentFolder}
+        selectedAsset={browser.selectedAsset}
+        setSelectedAsset={browser.setSelectedAsset}
+        onRetry={browser.fetchAssets}
+        filterType="all"
+        uploading={browser.uploading}
+        onUpload={browser.handleUpload}
+        onClearUploadError={browser.clearUploadError}
+        searchQuery={browser.searchQuery}
+        setSearchQuery={browser.setSearchQuery}
+        onFolderCreated={browser.addSyntheticFolder}
+      />
+
+      {/* Footer — info only, no insert/cancel */}
+      <div className="flex items-center px-5 py-3 border-t border-neutral-200 bg-white">
+        <span className="text-xs text-neutral-400">
+          {browser.assets.length} file{browser.assets.length !== 1 ? "s" : ""} in registry
+          {browser.selectedAsset && (
+            <> &middot; <span className="text-neutral-600">{browser.selectedAsset.filename}</span> &middot; {formatFileSize(browser.selectedAsset.file_size)} &middot; <span className="text-neutral-500 font-mono">{browser.selectedAsset.path}</span></>
+          )}
+        </span>
+      </div>
+    </div>
+  );
+}

package/components/builder/asset-browser/FileLightbox.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import type { RegisteredAsset } from "../../../lib/sanity/types";
+import { isImageType, isVideoType, formatFileSize } from "./helpers";
+
+export function FileLightbox({
+  asset,
+  resolveUrl,
+  onClose,
+}: {
+  asset: RegisteredAsset;
+  resolveUrl: (path: string) => string;
+  onClose: () => void;
+}) {
+  const [videoLoaded, setVideoLoaded] = useState(false);
+
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [onClose]);
+
+  const isImage = isImageType(asset.extension);
+  const isVideo = isVideoType(asset.extension);
+  const url = resolveUrl(asset.path);
+  const sizeLabel = formatFileSize(asset.file_size);
+  const isLargeVideo = isVideo && (asset.file_size ?? 0) > 10 * 1024 * 1024; // >10 MB
+
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      {/* Close button */}
+      <button
+        onClick={onClose}
+        className="absolute top-4 right-4 w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center transition-colors z-10"
+      >
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      </button>
+
+      {/* File info */}
+      <div className="absolute bottom-4 left-1/2 -translate-x-1/2 bg-black/60 backdrop-blur-sm rounded-lg px-4 py-2 z-10">
+        <p className="text-xs text-white/80 text-center">
+          {asset.filename}
+          {sizeLabel ? ` · ${sizeLabel}` : ""}
+        </p>
+      </div>
+
+      {/* Content */}
+      <div
+        className="max-w-[90vw] max-h-[85vh] flex items-center justify-center"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {isImage && (
+          // eslint-disable-next-line @next/next/no-img-element
+          // #12: SVGs rendered in <img> tags are sandboxed (no script execution).
+          // This is safe because <img> strips all interactive/scripting content.
+          <img
+            src={url}
+            alt={asset.filename}
+            className="max-w-full max-h-[85vh] object-contain rounded-lg shadow-2xl"
+          />
+        )}
+        {isVideo && (videoLoaded || !isLargeVideo) ? (
+          <video
+            src={url}
+            controls
+            autoPlay
+            muted
+            playsInline
+            preload="metadata"
+            className="max-w-full max-h-[85vh] rounded-lg shadow-2xl"
+          />
+        ) : isVideo ? (
+          /* Large video gate — show info + manual load button */
+          <div className="bg-neutral-900 rounded-xl p-10 flex flex-col items-center gap-5 max-w-sm">
+            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="text-neutral-500">
+              <polygon points="5 3 19 12 5 21 5 3" />
+            </svg>
+            <div className="text-center">
+              <p className="text-sm font-medium text-white">{asset.filename}</p>
+              <p className="text-xs text-neutral-400 mt-1">
+                {asset.extension.toUpperCase()} · {sizeLabel}
+              </p>
+            </div>
+            <button
+              onClick={() => setVideoLoaded(true)}
+              className="px-5 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-sm text-white transition-colors"
+            >
+              Load video ({sizeLabel})
+            </button>
+          </div>
+        ) : null}
+        {!isImage && !isVideo && (
+          <div className="bg-white rounded-xl p-12 flex flex-col items-center gap-4">
+            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="text-neutral-400">
+              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" />
+              <polyline points="14 2 14 8 20 8" />
+            </svg>
+            <div className="text-center">
+              <p className="text-sm font-medium text-neutral-700">{asset.filename}</p>
+              <p className="text-xs text-neutral-400 mt-1">{asset.extension.toUpperCase()} file · {sizeLabel}</p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}