diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx index 9a8de663..10366023 100644 --- a/src/photo/PhotoLarge.tsx +++ b/src/photo/PhotoLarge.tsx @@ -32,7 +32,7 @@ import { } from '@/app/config'; import AdminPhotoMenuClient from '@/admin/AdminPhotoMenuClient'; import { RevalidatePhoto } from './InfinitePhotoScroll'; -import { useRef } from 'react'; +import { useRef, useState } from 'react'; import useVisible from '@/utility/useVisible'; import PhotoDate from './PhotoDate'; import { useAppState } from '@/state/AppState'; @@ -41,6 +41,8 @@ import LoaderButton from '@/components/primitives/LoaderButton'; import Tooltip from '@/components/Tooltip'; import ZoomControls, { ZoomControlsRef } from '@/components/image/ZoomControls'; import PhotoRecipe from './PhotoRecipe'; +import { TbChecklist } from 'react-icons/tb'; +import { IoCloseSharp } from 'react-icons/io5'; export default function PhotoLarge({ photo, @@ -89,6 +91,8 @@ export default function PhotoLarge({ const zoomControlsRef = useRef(null); + const [shouldShowRecipe, setShouldShowRecipe] = useState(false); + const { areZoomControlsShown, arePhotosMatted, @@ -165,14 +169,14 @@ export default function PhotoLarge({ priority={priority} /> - {photo.fujifilmRecipe && photo.filmSimulation && + {shouldShowRecipe && photo.fujifilmRecipe && photo.filmSimulation &&
@@ -289,11 +293,30 @@ export default function PhotoLarge({
  • {photo.exposureCompensationFormatted ?? '0ev'}
  • {showSimulation && photo.filmSimulation && - } +
    + + {photo.fujifilmRecipe && + + + } +
    } }
    -
    - } - title={`Film Simulation: ${large}`} - type={type} - badged={badged} - contrast={contrast} - prefetch={prefetch} - hoverEntity={countOnHover} - iconWide - /> - {recipe && - - - } -
    - {recipe && shouldShowRecipe && - } -
    + } + title={`Film Simulation: ${large}`} + type={type} + badged={badged} + contrast={contrast} + prefetch={prefetch} + hoverEntity={countOnHover} + iconWide + /> ); }