+
+ {t('contents.modal_tags.current_label')}
+
+
+ {visibleExisting.map((tag) => (
+ removeExisting(tag)}
+ />
+ ))}
+ {added.map((tag) => (
+ removeAdded(tag)}
+ />
+ ))}
+ {visibleExisting.length === 0 && added.length === 0 && (
+
+ {t('contents.modal_tags.empty')}
+
+ )}
+
+
+
+
+ setInput(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') {
+ e.preventDefault();
+ addTag(input);
+ }
+ }}
+ aria-label={t('contents.modal_tags.add_label')}
+ className={`
+ min-w-0 flex-1 appearance-none bg-transparent py-2 ps-3 text-sm outline-0
+ placeholder:text-quanta-pigeon
+ [&::-webkit-calendar-picker-indicator]:hidden!
+ [&::-webkit-calendar-picker-indicator]:appearance-none
+ `}
+ />
+
+
+
+ {t('contents.modal_tags.add_hint')}
+
+
+
+
+
+
+
+
+