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});
-  redirect(`/admin/recipe/${photos[0].id}`);
+  const photos = await getPhotos({ tag: 'favs', limit: 4});
+  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,34 +10,35 @@ 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,
+    )}>
+      {backgroundImageUrl &&<ImageLarge
+        src={backgroundImageUrl}
+        alt="Image Background"
+        aspectRatio={3 / 2}
+      />}
       <div className={clsx(
-        'relative w-full aspect-[3/2]',
+        'absolute inset-0',
+        'flex items-center justify-center',
       )}>
-        <ImageLarge
-          src={backgroundImageUrl}
-          alt="Image Background"
-          aspectRatio={3 / 2}
-        />
-        <div className={clsx(
-          'absolute inset-0',
-          'flex items-center justify-center',
-        )}>
-          <PhotoRecipe {...{
-            recipe,
-            simulation,
-            exposure,
-            iso,
-          }} />
-        </div>
+        <PhotoRecipe {...{
+          recipe,
+          simulation,
+          exposure,
+          iso,
+        }} />
       </div>
     </div>
   );