custom-fields/Thumbnail.tsx - PayloadCMS show thumbnail vs filename

Thumbnail.tsx

'use client'
import Image from 'next/image'
import React, { useState, useEffect } from 'react'
import type { CellComponentProps } from 'payload'
import { useTableCell } from '@payloadcms/ui'
import { Media } from '@/payload-types'

const getImage = (imageId: string) => {
  return fetch(
    `/api/media/${imageId}`
  )
}

export const Thumbnail: React.FC<CellComponentProps> = (props) => {
  const { cellData } = useTableCell()
  const [image, setImage] = useState<Media | null>(null)
  const [loading, setLoading] = useState<boolean>(false)

  useEffect(() => {
    const fetchImage = async () => {
      if (cellData) {
        try {
          setLoading(true);
          const response = await getImage(cellData)
          const media: Media = await response.json()
          if (media && media.url) {
            setImage(media)
          }
          setLoading(false)
        } catch (error) {
          setLoading(false)
        }
      }
    }

    fetchImage()
  }, [cellData])

  if (loading) {
    return (
      <div className="relationship-cell">Loading...</div>
    )
  }

  if (!cellData || !image) {
    return (
      <div>&lt;No {String(props.label)}&gt;</div>
    )
  }

  return (
    <div
      className="thumbnail"
      style={{
        backgroundColor: cellData as string,
        display: "flex",
        position: "relative",
        width: "40px",
        height: "40px",
      }}
      >
      <Image
        src={image.url as string}
        alt={image.alt}
        fill={true}
        style={{
          objectFit: 'cover',
        }}
      />
    </div>
  )
}