astral/buzz-sheet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat : let fiter be inline of search bar in public dashboard

Browse Source
This commit is contained in:
gunshiz
2026-09-27 14:45:27 +07:00 Unverified
parent 12074ff562
commit cbfdeabfdd
1 changed files with 18 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/public/structured-directory.tsx
+18 -16
View File
@@ -107,22 +107,24 @@ export function StructuredDirectory({ guides }: { guides: GuideCard[] }) {
} }
return ( return (
<div className="flex flex-col gap-8"> <div className="flex flex-col gap-8">
<InputGroup className="h-11 max-w-2xl"> <div className="flex flex-wrap items-center gap-2">
<InputGroupAddon> <InputGroup className="h-11 min-w-64 flex-1">
<SearchIcon /> <InputGroupAddon>
</InputGroupAddon> <SearchIcon />
<InputGroupInput </InputGroupAddon>
value={query} <InputGroupInput
onChange={(event) => setParam("q", event.target.value)} value={query}
placeholder="ค้นหาไกด์…" onChange={(event) => setParam("q", event.target.value)}
aria-label="ค้นหาไกด์" placeholder="ค้นหาไกด์…"
/> aria-label="ค้นหาไกด์"
</InputGroup> />
<div className="flex flex-wrap gap-2" aria-label="ตัวกรองไกด์"> </InputGroup>
<GuideFilter label="ธาตุ" value={element} options={elements} optionLabels={elementLabels} onChange={(value) => setParam("element", value)} /> <div className="flex flex-wrap gap-2" aria-label="ตัวกรองไกด์">
<GuideFilter label="อาวุธ" value={weapon} options={weapons} optionLabels={weaponTypeLabels} onChange={(value) => setParam("weapon", value)} /> <GuideFilter label="ธาตุ" value={element} options={elements} optionLabels={elementLabels} onChange={(value) => setParam("element", value)} />
<GuideFilter label="ดาว" value={rarity} options={rarities.map(String)} onChange={(value) => setParam("rarity", value)} /> <GuideFilter label="อาวุธ" value={weapon} options={weapons} optionLabels={weaponTypeLabels} onChange={(value) => setParam("weapon", value)} />
<GuideFilter label="เรียงตาม" value={sort} options={["manual", "recent"]} optionLabels={{ manual: "แนะนำ", recent: "อัปเดตล่าสุด" }} includeAll={false} onChange={(value) => setParam("sort", value)} /> <GuideFilter label="ดาว" value={rarity} options={rarities.map(String)} onChange={(value) => setParam("rarity", value)} />
<GuideFilter label="เรียงตาม" value={sort} options={["manual", "recent"]} optionLabels={{ manual: "แนะนำ", recent: "อัปเดตล่าสุด" }} includeAll={false} onChange={(value) => setParam("sort", value)} />
</div>
</div> </div>
{filtered.length ? ( {filtered.length ? (