From cbfdeabfdde67a11464de978683a683b0478d16e Mon Sep 17 00:00:00 2001
From: gunshiz <spsshop1047@gmail.com>
Date: Sun, 27 Sep 2026 14:45:27 +0700
Subject: [PATCH] feat : let fiter be inline of search bar in public dashboard

---
 components/public/structured-directory.tsx | 34 ++++++++++++----------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/components/public/structured-directory.tsx b/components/public/structured-directory.tsx
index d5d663e..6d9cc97 100644
--- a/components/public/structured-directory.tsx
+++ b/components/public/structured-directory.tsx
@@ -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 ? (