Tailwindify MoreMediaOverlay component

app/soapbox/components/media-gallery/media-item.tsx

@@ -12,6 +12,7 @@ import { shouldLetterbox } from 'soapbox/utils/media-aspect-ratio';
 
 import { ATTACHMENT_LIMIT, MAX_FILENAME_LENGTH } from './constants';
 import MediaItemThumbnail from './media-item-thumbnail';
+import MoreMediaOverlay from './more-media-overlay';
 
 import type { Dimensions } from './types';
 import type { Attachment } from 'soapbox/types/entities';
@@ -211,9 +212,9 @@ const MediaItem: React.FC<IMediaItem> = ({
   return (
     <div className={clsx('media-gallery__item', `media-gallery__item--${attachment.type}`, { standalone })} key={attachment.id} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
       {last && total > ATTACHMENT_LIMIT && (
-        <div className='media-gallery__item-overflow'>
-          +{total - ATTACHMENT_LIMIT + 1}
-        </div>
+        <MoreMediaOverlay
+          count={total - ATTACHMENT_LIMIT + 1}
+        />
       )}
       <Blurhash
         hash={attachment.blurhash}

app/soapbox/components/media-gallery/more-media-overlay.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+interface IMoreMediaOverlay {
+  count: number
+}
+
+/** Overlay on the final image in a gallery to indicate more images can be seen by clicking into the modal. */
+const MoreMediaOverlay: React.FC<IMoreMediaOverlay> = ({ count }) => {
+  return (
+    <div className='absolute w-full h-full inset-0 bg-white/75 z-20 text-gray-900 text-center font-bold text-5xl flex items-center justify-center pointer-events-none'>
+      <span>+{count}</span>
+    </div>
+  );
+};
+
+export default MoreMediaOverlay;

app/styles/components/media-gallery.scss

@@ -12,10 +12,6 @@
       @apply h-24 w-24;
     }
   }
-
-  &-overflow {
-    @apply absolute w-full h-full inset-0 bg-white/75 z-20 text-gray-900 text-center font-bold text-5xl flex items-center justify-center pointer-events-none;
-  }
 }
 
 .media-gallery__item-thumbnail {