Repository: supabase/supabase
File: apps/studio/components/interfaces/Storage/FilesBuckets/BucketTable.tsx (TypeScript)

Code before:
  formattedGlobalUploadLimit: string
  getPolicyCount: (bucketName: string) => number
  setSelectedBucket: (bucket: Bucket) => void
  setModal: (modal: 'edit' | 'empty' | 'delete' | null) => void
}

export const BucketTableRow = ({
  mode,
  bucket,
  projectRef,
  formattedGlobalUploadLimit,
  getPolicyCount,
  setSelectedBucket,
  setModal,
}: BucketTableRowProps) => {
  const BucketTableRow = mode === 'standard' ? TableRow : VirtualizedTableRow
  const BucketTableCell = mode === 'standard' ? TableCell : VirtualizedTableCell

  return (
    <BucketTableRow key={bucket.id}>
      <BucketTableCell>
        <div className="flex items-center gap-2">
          <p title={bucket.id} className="text-foreground truncate max-w-[240px]">
            {bucket.id}
          </p>
          {bucket.public && <Badge variant="warning">Public</Badge>}
        </div>
      </BucketTableCell>

      <BucketTableCell>
        <p className="text-foreground-light">{getPolicyCount(bucket.id)}</p>
      </BucketTableCell>

      <BucketTableCell>
        <p className={bucket.file_size_limit ? 'text-foreground-light' : 'text-foreground-muted'}>
          {bucket.file_size_limit
            ? formatBytes(bucket.file_size_limit)
            : `Unset (${formattedGlobalUploadLimit})`}
        </p>
      </BucketTableCell>

      <BucketTableCell>
        <p
          className={bucket.allowed_mime_types ? 'text-foreground-light' : 'text-foreground-muted'}
        >
          {bucket.allowed_mime_types ? bucket.allowed_mime_types.join(', ') : 'Any'}
        </p>
      </BucketTableCell>

      <BucketTableCell>
        <div className="flex justify-end gap-2">

Review comment (suggestion):
Overall I'm a big fan of text styling like this where we load a class with the properties outside of mark up ...it's almost like what we used to call CSS back in my day. 👴 Big yes from me.

Code after:
  formattedGlobalUploadLimit: string
  getPolicyCount: (bucketName: string) => number
  setSelectedBucket: (bucket: Bucket) => void
  setModal: (modal: 'edit' | 'empty' | 'delete' | null) => void
}

export const BucketTableRow = ({
  mode,
  bucket,
  projectRef,
  formattedGlobalUploadLimit,
  getPolicyCount,
  setSelectedBucket,
  setModal,
}: BucketTableRowProps) => {
  const BucketTableRow = mode === 'standard' ? TableRow : VirtualizedTableRow
  const BucketTableCell = mode === 'standard' ? TableCell : VirtualizedTableCell

  return (
    <BucketTableRow key={bucket.id}>
      <BucketTableCell>
        <div className="flex items-center gap-2">
          <Link
            href={`/project/${projectRef}/storage/files/buckets/${encodeURIComponent(bucket.id)}`}
            title={bucket.id}
            className="text-link-table-cell"
          >
            {bucket.id}
          </Link>
          {bucket.public && <Badge variant="warning">Public</Badge>}
        </div>
      </BucketTableCell>

      <BucketTableCell>
        <p className="text-foreground-light">{getPolicyCount(bucket.id)}</p>
      </BucketTableCell>

      <BucketTableCell>
        <p className={bucket.file_size_limit ? 'text-foreground-light' : 'text-foreground-muted'}>
          {bucket.file_size_limit
            ? formatBytes(bucket.file_size_limit)
            : `Unset (${formattedGlobalUploadLimit})`}
        </p>
      </BucketTableCell>

      <BucketTableCell>
        <p
          className={bucket.allowed_mime_types ? 'text-foreground-light' : 'text-foreground-muted'}
        >
          {bucket.allowed_mime_types ? bucket.allowed_mime_types.join(', ') : 'Any'}
        </p>