Streamline custom image props

src/admin/AdminUploadsTable.tsx

@@ -2,7 +2,10 @@
 
 import ImageSmall from '@/components/image/ImageSmall';
 import Spinner from '@/components/Spinner';
-import { getExtensionFromStorageUrl } from '@/platforms/storage';
+import {
+  getIdFromStorageUrl,
+  getExtensionFromStorageUrl,
+} from '@/platforms/storage';
 import { clsx } from 'clsx/lite';
 import { FaRegCircleCheck } from 'react-icons/fa6';
 import { pathForAdminUploadUrl } from '@/app/paths';
@@ -46,6 +49,7 @@ export default function AdminUploadsTable({
                   'scale-90',
               )}>
                 <ImageSmall
+                  title={getIdFromStorageUrl(url)}
                   src={url}
                   alt={url}
                   aspectRatio={3.0 / 2.0}

src/components/image/ImageLarge.tsx

@@ -1,8 +1,8 @@
 import { IMAGE_QUALITY } from '@/app/config';
-import { IMAGE_WIDTH_LARGE, ImageProps } from '.';
+import { IMAGE_WIDTH_LARGE, CustomImageProps } from '.';
 import ImageWithFallback from './ImageWithFallback';
 
-export default function ImageLarge(props: ImageProps) {
+export default function ImageLarge(props: CustomImageProps) {
   const {
     aspectRatio,
     blurCompatibilityMode,

src/components/image/ImageMedium.tsx

@@ -1,7 +1,7 @@
-import { IMAGE_WIDTH_MEDIUM, ImageProps } from '.';
+import { IMAGE_WIDTH_MEDIUM, CustomImageProps } from '.';
 import ImageWithFallback from './ImageWithFallback';
 
-export default function ImageMedium(props: ImageProps) {
+export default function ImageMedium(props: CustomImageProps) {
   const {
     aspectRatio,
     blurCompatibilityMode,

src/components/image/ImageSmall.tsx

@@ -1,7 +1,7 @@
-import { IMAGE_WIDTH_SMALL, ImageProps } from '.';
+import { IMAGE_WIDTH_SMALL, CustomImageProps } from '.';
 import ImageWithFallback from './ImageWithFallback';
 
-export default function ImageSmall(props: ImageProps) {
+export default function ImageSmall(props: CustomImageProps) {
   const {
     aspectRatio,
     blurCompatibilityMode,

src/components/image/ImageWithFallback.tsx

@@ -9,14 +9,14 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 
 export default function ImageWithFallback(props: ImageProps & {
   blurCompatibilityLevel?: 'none' | 'low' | 'high'
-  imgClassName?: string
+  classNameImage?: string
 }) {
   const {
     className,
+    classNameImage = 'object-cover h-full',
     priority,
     blurDataURL,
     blurCompatibilityLevel = 'low',
-    imgClassName = 'object-cover h-full',
     ...rest
   } = props;
 
@@ -67,8 +67,8 @@ export default function ImageWithFallback(props: ImageProps & {
   return (
     <div
       className={clsx(
-        className,
         'flex relative',
+        className,
       )}
     >
       {(showFallback || shouldDebugImageFallbacks) &&
@@ -87,8 +87,8 @@ export default function ImageWithFallback(props: ImageProps & {
               ...rest,
               src: blurDataURL,
               className: clsx(
-                imgClassName,
                 getBlurClass(),
+                classNameImage,
               ),
             }} />
             :  <div className={clsx(
@@ -100,7 +100,7 @@ export default function ImageWithFallback(props: ImageProps & {
         ...rest,
         ref: imgRef,
         priority,
-        className: imgClassName,
+        className: classNameImage,
         onLoad,
         onError,
       }} />

src/components/image/index.ts

@@ -1,3 +1,6 @@
+import { ComponentProps } from 'react';
+import ImageWithFallback from './ImageWithFallback';
+
 // Height determined by intrinsic photo aspect ratio
 export const IMAGE_WIDTH_SMALL = 50;
 // Height determined by intrinsic photo aspect ratio
@@ -5,13 +8,10 @@ export const IMAGE_WIDTH_MEDIUM = 300;
 // Height determined by intrinsic photo aspect ratio
 export const IMAGE_WIDTH_LARGE = 1000;
 
-export interface ImageProps {
+export type CustomImageProps = Omit<
+  ComponentProps<typeof ImageWithFallback>,
+  'blurCompatibilityLevel'
+> & {
   aspectRatio: number
   blurCompatibilityMode?: boolean
-  className?: string
-  imgClassName?: string
-  src: string
-  alt: string
-  blurDataURL?: string
-  priority?: boolean
 }

src/photo/PhotoLarge.tsx

@@ -180,7 +180,7 @@ export default function PhotoLarge({
       >
         <ImageLarge
           className={clsx(arePhotosMatted && 'h-full')}
-          imgClassName={clsx(arePhotosMatted &&
+          classNameImage={clsx(arePhotosMatted &&
             'object-contain w-full h-full')}
           alt={altTextForPhoto(photo)}
           src={photo.url}

src/photo/PhotoMedium.tsx

@@ -67,7 +67,7 @@ export default function PhotoMedium({
             blurDataURL={photo.blurData}
             blurCompatibilityMode={doesPhotoNeedBlurCompatibility(photo)}
             className="flex object-cover w-full h-full"
-            imgClassName="object-cover w-full h-full"
+            classNameImage="object-cover w-full h-full"
             alt={altTextForPhoto(photo)}
             priority={priority}
           />