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 (
<div className="flex flex-col gap-8">
<InputGroup className="h-11 max-w-2xl">
<InputGroupAddon>
<SearchIcon />
</InputGroupAddon>
<InputGroupInput
value={query}
onChange={(event) => setParam("q", event.target.value)}
placeholder="ค้นหาไกด์…"
aria-label="ค้นหาไกด์"
/>
</InputGroup>
<div className="flex flex-wrap gap-2" aria-label="ตัวกรองไกด์">
<GuideFilter label="ธาตุ" value={element} options={elements} optionLabels={elementLabels} onChange={(value) => setParam("element", value)} />
<GuideFilter label="อาวุธ" value={weapon} options={weapons} optionLabels={weaponTypeLabels} onChange={(value) => setParam("weapon", 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 className="flex flex-wrap items-center gap-2">
<InputGroup className="h-11 min-w-64 flex-1">
<InputGroupAddon>
<SearchIcon />
</InputGroupAddon>
<InputGroupInput
value={query}
onChange={(event) => setParam("q", event.target.value)}
placeholder="ค้นหาไกด์…"
aria-label="ค้นหาไกด์"
/>
</InputGroup>
<div className="flex flex-wrap gap-2" aria-label="ตัวกรองไกด์">
<GuideFilter label="ธาตุ" value={element} options={elements} optionLabels={elementLabels} onChange={(value) => setParam("element", value)} />
<GuideFilter label="อาวุธ" value={weapon} options={weapons} optionLabels={weaponTypeLabels} onChange={(value) => setParam("weapon", 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>
{filtered.length ? (