Function JobCardComponent

components/JobCard.tsx:27–374

({
  job,
  onRemove,
  onCopySuccess,
  onInspect,
  downloadFilename,
  displayName,
}: JobCardProps)

}

const JobCardComponent = ({
  job,
  onRemove,
  onCopySuccess,
  onInspect,
  downloadFilename,
  displayName,
}: JobCardProps) => {
  const isDone = job.status === 'done';
  const isError = job.status === 'error';
  const isProcessing = job.status === 'processing';
  const isQueued = job.status === 'queued';
  const isOriginal = job.stats?.isOriginal;

  const isUnsupportedPreview = job.optimizedBlob?.type === 'image/qoi';

  const [displayedProgress, setDisplayedProgress] = useState(0);

  useEffect(() => {
    let timer: ReturnType<typeof setTimeout>;

    if (job.status === 'queued') {
      setDisplayedProgress(0);
    } else if (job.status === 'processing') {
      timer = setTimeout(() => {
        setDisplayedProgress(95);
      }, 50);
    } else if (job.status === 'done' || job.status === 'error') {
      setDisplayedProgress(100);
    }
    return () => clearTimeout(timer);
  }, [job.status]);

  let percentChange = '0';
  let isSizeIncreased = false;
  let durationLabel = '';

  if (job.stats) {
    const diff = job.stats.optimizedSize - job.stats.originalSize;
    const percentage = (Math.abs(diff) / job.stats.originalSize) * 100;
    percentChange = percentage.toFixed(1);
    isSizeIncreased = diff > 0;

    const ms = job.stats.timeTaken;
    durationLabel =
      ms < 1000 ? `${Math.round(ms)}ms` : `${(ms / 1000).toFixed(1)}s`;
  }

  const handleCopy = async () => {
    if (job.optimizedBlob) {
      try {
        await navigator.clipboard.write([
          new ClipboardItem({
            [job.optimizedBlob.type]: job.optimizedBlob,
          }),
        ]);
        onCopySuccess();
      } catch (err) {