diff --git a/app/admin/recipes/[recipe]/edit/page.tsx b/app/admin/recipes/[recipe]/edit/page.tsx index dc289b03..6f62d74e 100644 --- a/app/admin/recipes/[recipe]/edit/page.tsx +++ b/app/admin/recipes/[recipe]/edit/page.tsx @@ -6,6 +6,8 @@ import PhotoLightbox from '@/photo/PhotoLightbox'; import { getPhotosMeta } from '@/photo/db/query'; import AdminRecipeBadge from '@/admin/AdminRecipeBadge'; import AdminRecipeForm from '@/admin/AdminRecipeForm'; +import { getPhotoWithRecipeFromPhotos } from '@/recipe'; +import AdminShowRecipeButton from '@/admin/AdminShowRecipeButton'; const MAX_PHOTO_TO_SHOW = 6; @@ -28,6 +30,11 @@ export default async function RecipePageEdit({ getPhotosCached({ recipe, limit: MAX_PHOTO_TO_SHOW }), ]); + const { + recipeData, + filmSimulation, + } = getPhotoWithRecipeFromPhotos(photos) ?? {}; + if (count === 0) { redirect(PATH_ADMIN); } return ( @@ -35,6 +42,13 @@ export default async function RecipePageEdit({ backPath={PATH_ADMIN_TAGS} backLabel="Tags" breadcrumb={} + accessory={recipeData && filmSimulation && + + } >
diff --git a/src/admin/AdminShowRecipeButton.tsx b/src/admin/AdminShowRecipeButton.tsx new file mode 100644 index 00000000..52c9f66d --- /dev/null +++ b/src/admin/AdminShowRecipeButton.tsx @@ -0,0 +1,35 @@ +'use client'; + +import LoaderButton from '@/components/primitives/LoaderButton'; +import { FujifilmRecipe } from '@/platforms/fujifilm/recipe'; +import { FujifilmSimulation } from '@/platforms/fujifilm/simulation'; +import { useAppState } from '@/state/AppState'; +import { TbChecklist } from 'react-icons/tb'; + +export default function AdminShowRecipeButton({ + title, + recipe, + simulation, +}: { + title: string + recipe: FujifilmRecipe + simulation: FujifilmSimulation +}) { + const { setRecipeModalProps } = useAppState(); + + return ( + } + onClick={() => setRecipeModalProps?.({ + title, + recipe, + simulation, + })} + > + Preview + + ); +} \ No newline at end of file diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx index f588e850..49a72ea5 100644 --- a/src/components/Badge.tsx +++ b/src/components/Badge.tsx @@ -23,8 +23,8 @@ export default function Badge({ return clsx( 'px-1.5 h-[26px]', 'rounded-md', - 'bg-gray-100/80 dark:bg-gray-900/80', - 'border border-gray-200/60 dark:border-gray-800/75', + 'bg-gray-100/40 dark:bg-gray-900/60', + 'border border-medium', ); case 'small': return clsx( diff --git a/src/image-response/RecipeImageResponse.tsx b/src/image-response/RecipeImageResponse.tsx index 681cac55..e2335cc1 100644 --- a/src/image-response/RecipeImageResponse.tsx +++ b/src/image-response/RecipeImageResponse.tsx @@ -25,13 +25,15 @@ export default function RecipeImageResponse({ fontFamily: string smallText?: boolean }) { - const photo = getPhotoWithRecipeFromPhotos(photos); + const { + recipeData, + filmSimulation, + } = getPhotoWithRecipeFromPhotos(photos) ?? {}; - let recipeLines = photo?.recipeData && photo.filmSimulation + let recipeLines = recipeData && filmSimulation ? generateRecipeText({ - recipe: photo.recipeData, - simulation: photo.filmSimulation!, - iso: photo.iso!.toString(), + recipe: recipeData, + simulation: filmSimulation, }, true) : []; @@ -72,7 +74,7 @@ export default function RecipeImageResponse({ />, title: formatTag(recipe).toLocaleUpperCase(), }}> - {photo?.recipeData && + {recipeData &&
{text} - {isStringFilmSimulation(text) && + {isStringFilmSimulation(text) && filmSimulation &&