From 9ca52974bb4378d7d27fd67b169cb2ece1f6b759 Mon Sep 17 00:00:00 2001
From: Hendrik Liebau <mail@hendrik-liebau.de>
Date: Thu, 21 Mar 2024 14:57:41 +0100
Subject: [PATCH] Show title when images can't be retrieved

---
 src/app/images.tsx | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/app/images.tsx b/src/app/images.tsx
index 5264c72..89f0c40 100644
--- a/src/app/images.tsx
+++ b/src/app/images.tsx
@@ -15,6 +15,19 @@ export interface ImagesProps {
   readonly onDataFetched: (dataForAiState: unknown) => void;
 }
 
+type ImagesContainerProps = React.PropsWithChildren<{
+  readonly title: string;
+}>;
+
+function ImagesContainer({title, children}: ImagesContainerProps) {
+  return (
+    <div className="space-y-3">
+      <h4 className="text-l font-bold">{title}</h4>
+      {children}
+    </div>
+  );
+}
+
 export async function Images({
   title,
   notFoundMessage,
@@ -40,15 +53,16 @@ export async function Images({
         : result.errorMessage;
 
     return (
-      <p className="text-sm">
-        <em>{message}</em>
-      </p>
+      <ImagesContainer title={result.title}>
+        <p className="text-sm">
+          <em>{message}</em>
+        </p>
+      </ImagesContainer>
     );
   }
 
   return (
-    <div className="space-y-3">
-      <h4 className="text-l font-bold">{result.title}</h4>
+    <ImagesContainer title={result.title}>
       {result.images.map(({thumbnailUrl, url, width, height}) => (
         <ImageSelector key={thumbnailUrl} url={url}>
           <ProgressiveImage
@@ -60,6 +74,6 @@ export async function Images({
           />
         </ImageSelector>
       ))}
-    </div>
+    </ImagesContainer>
   );
 }