Vercel/src/recipe/RecipeHeader.tsx
Sam Becker b7cb6715b7
Speed up category hovers (#279)
* Extract out ShareHover components
* Refactor hover/category state
* Rename photo query options types
* Restore category count slice of app state
* Streamline entity hover headers
* Standardize swr keys
* Suppress hover counts to years
* Refine entity hover design
* Make image hovers opt out
2025-07-04 12:19:45 -05:00

61 lines
1.5 KiB
TypeScript

'use client';
import { Photo, PhotoDateRange } from '@/photo';
import PhotoHeader from '@/photo/PhotoHeader';
import PhotoRecipe from './PhotoRecipe';
import { useAppState } from '@/app/AppState';
import { descriptionForRecipePhotos, getRecipePropsFromPhotos } from '.';
import { AI_TEXT_GENERATION_ENABLED } from '@/app/config';
import { useAppText } from '@/i18n/state/client';
export default function RecipeHeader({
recipe,
photos,
selectedPhoto,
indexNumber,
count,
dateRange,
}: {
recipe: string
photos: Photo[]
selectedPhoto?: Photo
indexNumber?: number
count?: number
dateRange?: PhotoDateRange
}) {
const { recipeModalProps, setRecipeModalProps } = useAppState();
const appText = useAppText();
const recipeProps = getRecipePropsFromPhotos(photos, selectedPhoto);
return (
<PhotoHeader
recipe={recipe}
entity={<PhotoRecipe
recipe={recipe}
contrast="high"
showHover={false}
isShowingRecipeOverlay={Boolean(recipeModalProps)}
toggleRecipeOverlay={recipeProps
? () => setRecipeModalProps?.(recipeProps)
: undefined}
/>}
entityDescription={descriptionForRecipePhotos(
photos,
appText,
undefined,
count,
dateRange,
)}
photos={photos}
selectedPhoto={selectedPhoto}
indexNumber={indexNumber}
count={count}
dateRange={dateRange}
hasAiTextGeneration={AI_TEXT_GENERATION_ENABLED}
includeShareButton
/>
);
}