Add film simulation to recipe og images
This commit is contained in:
parent
bd0cfb6fa3
commit
3c4f72dba4
@ -6,7 +6,8 @@ import type { NextImageSize } from '@/platforms/next-image';
|
|||||||
import { formatTag } from '@/tag';
|
import { formatTag } from '@/tag';
|
||||||
import { TbChecklist } from 'react-icons/tb';
|
import { TbChecklist } from 'react-icons/tb';
|
||||||
import { generateRecipeText, getPhotoWithRecipeFromPhotos } from '@/recipe';
|
import { generateRecipeText, getPhotoWithRecipeFromPhotos } from '@/recipe';
|
||||||
|
import PhotoFilmSimulationIcon from '@/simulation/PhotoFilmSimulationIcon';
|
||||||
|
import { isStringFilmSimulation } from '@/platforms/fujifilm/simulation';
|
||||||
const MAX_RECIPE_LINES = 8;
|
const MAX_RECIPE_LINES = 8;
|
||||||
|
|
||||||
export default function RecipeImageResponse({
|
export default function RecipeImageResponse({
|
||||||
@ -97,6 +98,9 @@ export default function RecipeImageResponse({
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<div style={{
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: height * .0325,
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
textOverflow: 'ellipsis',
|
textOverflow: 'ellipsis',
|
||||||
whiteSpace: 'nowrap',
|
whiteSpace: 'nowrap',
|
||||||
@ -104,6 +108,14 @@ export default function RecipeImageResponse({
|
|||||||
flexGrow: 1,
|
flexGrow: 1,
|
||||||
}}>
|
}}>
|
||||||
{text}
|
{text}
|
||||||
|
{isStringFilmSimulation(text) &&
|
||||||
|
<div tw="flex">
|
||||||
|
<PhotoFilmSimulationIcon
|
||||||
|
simulation={photo.filmSimulation}
|
||||||
|
height={height * .06}
|
||||||
|
style={{ transform: `translateY(${-height * .001}px)`}}
|
||||||
|
/>
|
||||||
|
</div>}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|||||||
@ -214,6 +214,17 @@ export const FILM_SIMULATION_FORM_INPUT_OPTIONS = Object
|
|||||||
))
|
))
|
||||||
.sort((a, b) => a.label.localeCompare(b.label));
|
.sort((a, b) => a.label.localeCompare(b.label));
|
||||||
|
|
||||||
|
const ALL_POSSIBLE_FILM_SIMULATION_LABELS = Object
|
||||||
|
.values(FILM_SIMULATION_LABELS)
|
||||||
|
.flatMap(({ small, medium, large }) => [
|
||||||
|
small.toLocaleLowerCase(),
|
||||||
|
medium.toLocaleLowerCase(),
|
||||||
|
large.toLocaleLowerCase(),
|
||||||
|
]);
|
||||||
|
|
||||||
|
export const isStringFilmSimulation = (simulation: string) =>
|
||||||
|
ALL_POSSIBLE_FILM_SIMULATION_LABELS.includes(simulation.toLocaleLowerCase());
|
||||||
|
|
||||||
export const labelForFilmSimulation = (simulation: FujifilmSimulation) =>
|
export const labelForFilmSimulation = (simulation: FujifilmSimulation) =>
|
||||||
FILM_SIMULATION_LABELS[simulation];
|
FILM_SIMULATION_LABELS[simulation];
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user