Refine recipe overlay demo

app/admin/recipe/page.tsx

@@ -1,38 +1,33 @@
-import { getPhotos } from '@/photo/db/query';
+import { getPhoto, getPhotos } from '@/photo/db/query';
 import PhotoRecipeOverlay from '@/photo/PhotoRecipeOverlay';
 
 export default async function AdminRecipePage() {
-  const photos = await getPhotos({ tag: 'favs', limit: 4});
-  const photosHidden = await getPhotos({ hidden: 'only', limit: 1 });
-  const { filmSimulation } = photosHidden[0];
+  const [
+    photos,
+    photo1,
+    photo2,
+    photo3,
+    photo4,
+    photosHidden,
+  ] = await Promise.all([
+    getPhotos({ tag: 'favs' }),
+    getPhoto('4zT6dgPr'),
+    getPhoto('9MopluBn'),
+    getPhoto('ifv8zq45'),
+    getPhoto('2BO2YoW6'),
+    getPhotos({ hidden: 'only', limit: 1 }),
+  ]);
   const { fujifilmRecipe } = photosHidden[0];
   return (
-    <div className="grid grid-cols-2 xl:grid-cols-3 w-full">
-      {photos.map(photo =>
-        <PhotoRecipeOverlay
-          key={photo.id}
-          backgroundImageUrl={photo.url}
-          recipe={fujifilmRecipe!}
-          simulation={filmSimulation!}
-          exposure={photo.exposureCompensationFormatted ?? '+0ev'}
-          iso={photo.isoFormatted ?? 'ISO 0'}
-        />,
-      )}
-      <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"
-      />
-    </div>);
+    <PhotoRecipeOverlay
+      photos={[
+        ...photos,
+        photo1!,
+        photo2!,
+        photo3!,
+        photo4!,
+      ]}
+      recipe={fujifilmRecipe!}
+    />
+  );
 }

src/photo/PhotoRecipeOverlay.tsx

@@ -1,43 +1,50 @@
+'use client';
+
 import { FujifilmRecipe } from '@/platforms/fujifilm/recipe';
-import { FilmSimulation } from '@/simulation';
 import clsx from 'clsx/lite';
 import ImageLarge from '@/components/image/ImageLarge';
 import PhotoRecipe from './PhotoRecipe';
-
+import { Photo } from '.';
+import { useEffect, useState } from 'react';
 export default function PhotoRecipeOverlay({
-  backgroundImageUrl,
+  photos,
   recipe,
-  simulation,
-  exposure,
-  iso,
   className,
 }: {
-  backgroundImageUrl?: string
+  photos: Photo[]
   recipe: FujifilmRecipe
-  simulation: FilmSimulation
-  exposure: string
-  iso: string
   className?: string
 }) {
+  const [photoIndex, setPhotoIndex] = useState(0);
+  
+  const photo = photos[photoIndex];
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setPhotoIndex((photoIndex + 1) % photos.length);
+    }, 500);
+    return () => clearInterval(interval);
+  }, [photoIndex, photos]);
+
   return (
     <div className={clsx(
       'relative w-full aspect-[3/2]',
       className,
     )}>
-      {backgroundImageUrl &&<ImageLarge
-        src={backgroundImageUrl}
+      <ImageLarge
+        src={photo.url}
         alt="Image Background"
         aspectRatio={3 / 2}
-      />}
+      />
       <div className={clsx(
-        'absolute inset-0',
+        'absolute inset-0 w-full h-full',
         'flex items-center justify-center',
       )}>
         <PhotoRecipe {...{
           recipe,
-          simulation,
-          exposure,
-          iso,
+          simulation: photo.filmSimulation ?? 'provia',
+          exposure: photo.exposureCompensationFormatted ?? '+0ev',
+          iso: photo.isoFormatted ?? 'ISO 0',
         }} />
       </div>
     </div>