terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: simplify desktop search panel
All checks were successful
Deploy to Frontend Servers / deploy (push) Successful in 25s
Details

Browse Source
This commit is contained in:
TerryM
2026-05-31 03:21:23 +08:00
parent 345ccb0a25
commit c71ebba807
2 changed files with 54 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/SearchPanel.tsx
View File

@@ -361,41 +361,45 @@ export function SearchPanel({
</section> </section>
) : null} ) : null}
<section className={cleanQuery ? "mt-6" : showInput ? "mt-5" : "mt-0"}> {!cleanQuery ? (
<div className="mb-3 flex items-center justify-between"> <section className={showInput ? "mt-5" : "mt-0"}>
<h2 className="border-l-4 border-ark-gold pl-3 text-base font-bold text-neutral-100"> <div className="mb-3 flex items-center justify-between">
{t("currentTags")} <h2 className="border-l-4 border-ark-gold pl-3 text-base font-bold text-neutral-100">
</h2> {t("currentTags")}
</div> </h2>
</div>
{isTagLoading ? ( {isTagLoading ? (
<div className="py-3 text-sm text-neutral-500">{t("loading")}</div> <div className="py-3 text-sm text-neutral-500">
) : tags.length > 0 ? ( {t("loading")}
<div className="flex flex-wrap gap-2"> </div>
{tags.map((tag) => { ) : tags.length > 0 ? (
const active = selectedTag === tag.name; <div className="flex flex-wrap gap-2">
return ( {tags.map((tag) => {
<button const active = selectedTag === tag.name;
key={tag.name} return (
type="button" <button
onClick={() => showTagPosts(tag.name)} key={tag.name}
className={`rounded-full border px-3 py-1.5 text-xs font-bold transition ${ type="button"
active onClick={() => showTagPosts(tag.name)}
? "border-ark-gold bg-ark-gold/15 text-ark-gold" className={`rounded-full border px-3 py-1.5 text-xs font-bold transition ${
: "border-white/10 bg-[#232329] text-neutral-200 hover:border-ark-gold/60 hover:text-ark-gold" active
}`} ? "border-ark-gold bg-ark-gold/15 text-ark-gold"
> : "border-white/10 bg-[#232329] text-neutral-200 hover:border-ark-gold/60 hover:text-ark-gold"
#{tag.name} }`}
</button> >
); #{tag.name}
})} </button>
</div> );
) : ( })}
<div className="py-3 text-sm text-neutral-500"> </div>
{t("noTagsAvailable")} ) : (
</div> <div className="py-3 text-sm text-neutral-500">
)} {t("noTagsAvailable")}
</section> </div>
)}
</section>
) : null}
{selectedTag ? ( {selectedTag ? (
<section className="mt-6"> <section className="mt-6">

35
src/layouts/PublicLayout.tsx
View File

@@ -613,28 +613,26 @@ export function PublicLayout() {
<div className="flex min-w-0 flex-1 items-center justify-end gap-2 min-[1100px]:flex-none"> <div className="flex min-w-0 flex-1 items-center justify-end gap-2 min-[1100px]:flex-none">
<div <div
ref={desktopSearchRef} ref={desktopSearchRef}
className="hidden h-10 min-w-0 flex-1 items-center gap-2 rounded-full border border-ark-line bg-[#1a1b20] py-2 pl-3 pr-3 shadow-inner md:flex min-[1100px]:w-44 min-[1100px]:flex-none lg:pr-4 xl:w-52" className={`hidden md:block ${
desktopSearchOpen ? "pointer-events-none opacity-0" : ""
}`}
> >
<button <button
type="button" type="button"
onClick={() => {
if (q.trim()) goSearch();
else setDesktopSearchOpen((value) => !value);
}}
className="shrink-0 rounded-full p-1 text-[#c6c7cf] transition hover:bg-white/5 hover:text-ark-gold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/60"
aria-label={t("searchNow")}
>
<SearchIcon size={16} />
</button>
<input
value={q}
onFocus={() => setDesktopSearchOpen(true)}
onClick={() => setDesktopSearchOpen(true)} onClick={() => setDesktopSearchOpen(true)}
onChange={(e) => setQ(e.target.value)} className="flex h-10 min-w-0 flex-1 items-center gap-2 rounded-full border border-ark-line bg-[#1a1b20] py-2 pl-3 pr-3 text-left shadow-inner outline-none transition hover:border-ark-gold/50 focus-visible:ring-2 focus-visible:ring-ark-gold/60 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg min-[1100px]:w-44 min-[1100px]:flex-none lg:pr-4 xl:w-52"
onKeyDown={(e) => e.key === "Enter" && goSearch()} aria-label={t("searchNow")}
placeholder={t("searchPlaceholder")} aria-expanded={desktopSearchOpen}
className="min-w-0 flex-1 rounded-md bg-transparent text-sm text-neutral-200 outline-none placeholder:text-[#777985] focus-visible:ring-2 focus-visible:ring-ark-gold/60 focus-visible:ring-offset-2 focus-visible:ring-offset-[#1a1b20]" >
/> <SearchIcon size={16} className="shrink-0 text-[#c6c7cf]" />
<span
className={`min-w-0 flex-1 truncate text-sm ${
q.trim() ? "text-neutral-200" : "text-[#777985]"
}`}
>
{q.trim() || t("searchPlaceholder")}
</span>
</button>
</div> </div>
<LanguageDropdown <LanguageDropdown
lang={lang} lang={lang}
@@ -736,7 +734,6 @@ export function PublicLayout() {
onSearch={goSearch} onSearch={goSearch}
onResultClick={() => setDesktopSearchOpen(false)} onResultClick={() => setDesktopSearchOpen(false)}
variant="desktop" variant="desktop"
showInput={false}
/> />
) : null} ) : null}