From b13b286b3ff32b38e426af8f620c73b9f15b77d2 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Fri, 14 Mar 2025 23:14:32 -0500
Subject: [PATCH] Streamline custom image props

---
 src/admin/AdminUploadsTable.tsx            |  6 +++++-
 src/components/image/ImageLarge.tsx        |  4 ++--
 src/components/image/ImageMedium.tsx       |  4 ++--
 src/components/image/ImageSmall.tsx        |  4 ++--
 src/components/image/ImageWithFallback.tsx | 10 +++++-----
 src/components/image/index.ts              | 14 +++++++-------
 src/photo/PhotoLarge.tsx                   |  2 +-
 src/photo/PhotoMedium.tsx                  |  2 +-
 8 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/src/admin/AdminUploadsTable.tsx b/src/admin/AdminUploadsTable.tsx
index 091dfe98..2a4f57a6 100644
--- a/src/admin/AdminUploadsTable.tsx
+++ b/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}
diff --git a/src/components/image/ImageLarge.tsx b/src/components/image/ImageLarge.tsx
index 0f56f6b1..828e8427 100644
--- a/src/components/image/ImageLarge.tsx
+++ b/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,
diff --git a/src/components/image/ImageMedium.tsx b/src/components/image/ImageMedium.tsx
index 8d3b7322..a953b1e1 100644
--- a/src/components/image/ImageMedium.tsx
+++ b/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,
diff --git a/src/components/image/ImageSmall.tsx b/src/components/image/ImageSmall.tsx
index 5878014f..9b6df969 100644
--- a/src/components/image/ImageSmall.tsx
+++ b/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,
diff --git a/src/components/image/ImageWithFallback.tsx b/src/components/image/ImageWithFallback.tsx
index c39fdd93..0968d2e2 100644
--- a/src/components/image/ImageWithFallback.tsx
+++ b/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,
       }} />
diff --git a/src/components/image/index.ts b/src/components/image/index.ts
index eb7d6582..fea317ec 100644
--- a/src/components/image/index.ts
+++ b/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
 }
diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx
index 2aa203e0..e0ca83eb 100644
--- a/src/photo/PhotoLarge.tsx
+++ b/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}
diff --git a/src/photo/PhotoMedium.tsx b/src/photo/PhotoMedium.tsx
index e9f5554e..ac25792d 100644
--- a/src/photo/PhotoMedium.tsx
+++ b/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}
           />