diff --git a/src/components/TagInput.tsx b/src/components/TagInput.tsx
index ce2939ab..ead6c722 100644
--- a/src/components/TagInput.tsx
+++ b/src/components/TagInput.tsx
@@ -2,7 +2,6 @@ import { AnnotatedTag } from '@/photo/form';
import { convertStringToArray, parameterize } from '@/utility/string';
import { clsx } from 'clsx/lite';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
const KEY_KEYDOWN = 'keydown';
const CREATE_LABEL = 'Create';
@@ -244,6 +243,15 @@ export default function TagInput({
limit,
]);
+ const formatValue = useCallback((value: string) => {
+ const option = options.find(option => option.value === value);
+ return <>
+ {option?.icon}
+ {option?.label ?? value}
+ >;
+ },
+ [options]);
+
return (
+ {/* Selected Options */}
{selectedOptions
.filter(Boolean)
.map(option =>
@@ -302,7 +311,7 @@ export default function TagInput({
)}
onClick={() => removeOption(option)}
>
- {option}
+ {formatValue(value)}
)}
+ {/* Menu Options */}
{optionsFiltered.map(({
value,
annotation,
@@ -378,7 +388,7 @@ export default function TagInput({
onFocus={() => setSelectedOptionIndex(index)}
>
- {value}
+ {formatValue(value)}
{annotation &&
{
const films = includeAllFujifilmSimulations
- ? FILM_SIMULATION_FORM_INPUT_OPTIONS.map(film => ({
- value: film.value,
+ ? FILM_SIMULATION_FORM_INPUT_OPTIONS.map(({ value }) => ({
+ value,
+ label: labelForFilm(value).large,
} as AnnotatedTag))
: [];
diff --git a/src/photo/form/index.ts b/src/photo/form/index.ts
index 0b8ca42c..fc7ff3af 100644
--- a/src/photo/form/index.ts
+++ b/src/photo/form/index.ts
@@ -21,6 +21,7 @@ import { GEO_PRIVACY_ENABLED } from '@/app/config';
import { TAG_FAVS, getValidationMessageForTags } from '@/tag';
import { MAKE_FUJIFILM } from '@/platforms/fujifilm';
import { FujifilmRecipe } from '@/platforms/fujifilm/recipe';
+import { ReactNode } from 'react';
type VirtualFields =
'favorite' |
@@ -41,6 +42,8 @@ export type FieldSetType =
export type AnnotatedTag = {
value: string,
+ label?: string,
+ icon?: ReactNode
annotation?: string,
annotationAria?: string,
};