refactor(team-search) : use search target select

components/public/team-search.tsx

@@ -14,6 +14,14 @@ import { Badge } from "@/components/ui/badge";
 import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Kbd } from "@/components/ui/kbd";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { elementBackgroundColor } from "@/lib/catalog/element";
@@ -411,33 +419,37 @@ export function TeamSearch({ groups }: { groups: PublicGuide["teamGroups"] }) {
         </ScrollableNav>
       ) : null}
       {activeGroup?.note ? <p className="whitespace-pre-wrap text-muted-foreground">{activeGroup.note}</p> : null}
-      <div className="relative">
+      <div className="flex min-w-0 items-center gap-2">
-        <SearchIcon aria-hidden="true" className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+        <Select value={searchTarget} onValueChange={(value) => {
-        <Input
+          if (value) setSearchTarget(value as TeamSearchTarget);
-          aria-label="ค้นหาทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์"
+        }}>
-          className="pl-9"
+          <SelectTrigger
-          placeholder="ค้นหาทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์"
+            aria-label="เลือกประเภทข้อมูลที่ต้องการค้นหา"
-          value={query}
+            className="w-32 shrink-0"
-          onValueChange={setQuery}
+          >
-        />
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="all">ทั้งหมด</SelectItem>
+              <SelectItem value="team">ชื่อทีม</SelectItem>
+              <SelectItem value="character">ตัวละคร</SelectItem>
+              <SelectItem value="weapon">อาวุธ</SelectItem>
+              <SelectItem value="artifact">อาร์ติแฟกต์</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <div className="relative min-w-0 flex-1">
+          <SearchIcon aria-hidden="true" className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            aria-label="ค้นหาทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์"
+            className="pl-9"
+            placeholder="ค้นหาทีม ตัวละคร อาวุธ หรืออาร์ติแฟกต์"
+            value={query}
+            onValueChange={setQuery}
+          />
+        </div>
       </div>
-      <ToggleGroup
-        aria-label="เลือกประเภทข้อมูลที่ต้องการค้นหา"
-        className="max-w-full flex-wrap justify-start"
-        variant="outline"
-        size="sm"
-        value={[searchTarget]}
-        onValueChange={(value) => {
-          const target = value[0] as TeamSearchTarget | undefined;
-          if (target) setSearchTarget(target);
-        }}
-      >
-        <ToggleGroupItem value="all">ทั้งหมด</ToggleGroupItem>
-        <ToggleGroupItem value="team">ชื่อทีม</ToggleGroupItem>
-        <ToggleGroupItem value="character">ตัวละคร</ToggleGroupItem>
-        <ToggleGroupItem value="weapon">อาวุธ</ToggleGroupItem>
-        <ToggleGroupItem value="artifact">อาร์ติแฟกต์</ToggleGroupItem>
-      </ToggleGroup>
       <div className="flex items-center gap-2">
         <ToggleGroup
           aria-label="เรียงทีมตาม DPS"