chadtmiller.com/pds.js

Switch repository

Loading…

import {
  FileAudioIcon,
  FileIcon,
  FileTextIcon,
  FileVideoIcon,
} from 'lucide-react';
import { cn } from '#/lib/utils.js';

function typeIcon(mimeType) {
  const kind = String(mimeType || '').split('/')[0];
  if (kind === 'video') return <FileVideoIcon />;
  if (kind === 'audio') return <FileAudioIcon />;
  if (kind === 'text') return <FileTextIcon />;
  return <FileIcon />;
}

/** The image itself when it is one, otherwise an icon chip for its kind. */
export function FilePreview({ blob, blobBase, className }) {
  if (blobBase && blob.mimeType?.startsWith('image/')) {
    return (
      <img
        src={`${blobBase}&cid=${encodeURIComponent(blob.cid)}`}
        alt=""
        loading="lazy"
        className={cn(
          'size-20 shrink-0 rounded-xl border border-border object-cover',
          className,
        )}
      />
    );
  }
  return (
    <div
      className={cn(
        'flex size-20 shrink-0 items-center justify-center rounded-xl bg-accent text-faint [&_svg]:size-7',
        className,
      )}
    >
      {typeIcon(blob.mimeType)}
    </div>
  );
}