nyne/nysoure
1
0
Fork 0
mirror of https://github.com/wgh136/nysoure.git synced 2025-09-27 20:27:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhance tag input display with type badge and adjust dropdown width

Browse Source
This commit is contained in:
nyne
2025-05-30 20:07:20 +08:00
parent 5fca51f852
commit d6c6bf943e
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/components/tag_input.tsx
View File

@@ -94,7 +94,10 @@ export default function TagInput({ onAdd, mainTag }: { onAdd: (tag: Tag) => void
setTags([]) setTags([])
const input = document.getElementById("search_tags_input") as HTMLInputElement const input = document.getElementById("search_tags_input") as HTMLInputElement
input.blur() input.blur()
}}><a>{t.name}</a></li> }}><a>
<span>{t.name}</span>
{t.type && <span className="badge badge-secondary badge-sm ml-2 text-xs">{t.type}</span>}
</a></li>
}) })
} }
{ {
@@ -106,11 +109,11 @@ export default function TagInput({ onAdd, mainTag }: { onAdd: (tag: Tag) => void
} }
return <div className={"dropdown dropdown-end"}> return <div className={"dropdown dropdown-end"}>
<label className="input"> <label className="input w-64">
<MdSearch size={18}/> <MdSearch size={18}/>
<input autoComplete={"off"} id={"search_tags_input"} tabIndex={0} type="text" className="grow" placeholder={t("Search Tags")} value={keyword} onChange={(e) => handleChange(e.target.value)} /> <input autoComplete={"off"} id={"search_tags_input"} tabIndex={0} type="text" className="grow" placeholder={t("Search Tags")} value={keyword} onChange={(e) => handleChange(e.target.value)} />
</label> </label>
<ul tabIndex={0} className="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow mt-2 border border-base-300"> <ul tabIndex={0} className="dropdown-content menu bg-base-100 rounded-box z-1 w-64 p-2 shadow mt-2 border border-base-300">
{dropdownContent} {dropdownContent}
</ul> </ul>
</div> </div>