Create new recipe overlay overview

app/admin/recipe/page.tsx

@@ -1,7 +1,38 @@
 import { getPhotos } from '@/photo/db/query';
-import { redirect } from 'next/navigation';
+import PhotoRecipeOverlay from '@/photo/PhotoRecipeOverlay';
 
 export default async function AdminRecipePage() {
-  const photos = await getPhotos({ limit: 1});
+  const photos = await getPhotos({ tag: 'favs', limit: 4});
-  redirect(`/admin/recipe/${photos[0].id}`);
+  const photosHidden = await getPhotos({ hidden: 'only', limit: 1 });
+  const { filmSimulation } = photosHidden[0];
+  const { fujifilmRecipe } = photosHidden[0];
+  return (
+    <div className="grid grid-cols-3 gap-1 w-full">
+      <PhotoRecipeOverlay
+        key="black"
+        className="bg-black"
+        recipe={fujifilmRecipe!}
+        simulation={filmSimulation!}
+        exposure="+0ev"
+        iso="ISO 0"
+      />
+      <PhotoRecipeOverlay
+        key="white"
+        className="bg-white"
+        recipe={fujifilmRecipe!}
+        simulation={filmSimulation!}
+        exposure="+0ev"
+        iso="ISO 0"
+      />
+      {photos.map(photo =>
+        <PhotoRecipeOverlay
+          key={photo.id}
+          backgroundImageUrl={photo.url}
+          recipe={fujifilmRecipe!}
+          simulation={filmSimulation!}
+          exposure={photo.exposureCompensationFormatted ?? '+0ev'}
+          iso={photo.isoFormatted ?? 'ISO 0'}
+        />,
+      )}
+    </div>);
 }

src/photo/PhotoRecipeOverlay.tsx

@@ -10,23 +10,25 @@ export default function PhotoRecipeOverlay({
   simulation,
   exposure,
   iso,
+  className,
 }: {
-  backgroundImageUrl: string
+  backgroundImageUrl?: string
   recipe: FujifilmRecipe
   simulation: FilmSimulation
   exposure: string
   iso: string
+  className?: string
 }) {
   return (
-    <div className="space-y-4">
     <div className={clsx(
       'relative w-full aspect-[3/2]',
+      className,
     )}>
-        <ImageLarge
+      {backgroundImageUrl &&<ImageLarge
         src={backgroundImageUrl}
         alt="Image Background"
         aspectRatio={3 / 2}
-        />
+      />}
       <div className={clsx(
         'absolute inset-0',
         'flex items-center justify-center',
@@ -39,6 +41,5 @@ export default function PhotoRecipeOverlay({
         }} />
       </div>
     </div>
-    </div>
   );
 }