feat : updae

components/public/structured-directory.tsx

@@ -170,19 +170,19 @@ export function StructuredDirectory({ guides }: { guides: GuideCard[] }) {
     <div className="flex flex-col gap-8">
       <div className="flex flex-col gap-2">
         <div className="flex items-center gap-2">
-          <InputGroup className="h-9 min-w-0 flex-1 sm:w-48 sm:flex-none">
+          <InputGroup className="min-h-11 sm:min-h-9 min-w-0 flex-1 sm:w-48 sm:flex-none">
             <InputGroupAddon>
               <SearchIcon />
             </InputGroupAddon>
             <InputGroupInput
               value={query}
               onChange={(event) => setParam("q", event.target.value)}
-              placeholder="ค้นหาไกด์…"
+              placeholder="ค้นหาชื่อตัวละคร…"
               aria-label="ค้นหาไกด์"
             />
           </InputGroup>
           <Select value={sort} onValueChange={(next) => next && setParam("sort", next)}>
-            <SelectTrigger aria-label="เรียงตาม" className="w-32 sm:w-auto"><SelectValue>{sortOptions.find((option) => option.value === sort)?.label}</SelectValue></SelectTrigger>
+            <SelectTrigger aria-label="เรียงตาม" className="min-h-11 w-32 sm:min-h-0 sm:w-auto"><SelectValue>{sortOptions.find((option) => option.value === sort)?.label}</SelectValue></SelectTrigger>
             <SelectContent>
               <SelectGroup>
                 {sortOptions.map((option) => <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>)}
@@ -192,20 +192,20 @@ export function StructuredDirectory({ guides }: { guides: GuideCard[] }) {
         </div>
         <div className="sm:hidden">
           <Drawer>
-            <DrawerTrigger render={<Button variant="outline" className="w-full" />}>
+            <DrawerTrigger render={<Button variant="outline" className="min-h-11 w-full" />}>
               <SlidersHorizontalIcon data-icon="inline-start" />ตัวกรอง{activeFilters.length ? ` (${activeFilters.length})` : ""}
             </DrawerTrigger>
             <DrawerContent>
               <DrawerHeader><DrawerTitle>ตัวกรองไกด์</DrawerTitle><DrawerDescription>เลือกธาตุ อาวุธ หรือจำนวนดาว</DrawerDescription></DrawerHeader>
               <div className="flex max-h-[60svh] flex-col gap-5 overflow-y-auto px-4 pb-4">{filterControls(true)}</div>
               <div className="flex gap-2 border-t p-4">
-                <Button variant="outline" disabled={!activeFilters.length} onClick={() => clearParams()}>ล้างตัวกรอง</Button>
-                <DrawerClose render={<Button className="flex-1" />}>ดู {filtered.length} ไกด์</DrawerClose>
+                <Button variant="outline" className="min-h-11" disabled={!activeFilters.length} onClick={() => clearParams()}>ล้างตัวกรอง</Button>
+                <DrawerClose render={<Button className="min-h-11 flex-1" />}>ดู {filtered.length} ไกด์</DrawerClose>
               </div>
             </DrawerContent>
           </Drawer>
         </div>
-        <div className="hidden min-w-0 items-center gap-2 overflow-x-auto pb-1 sm:flex" aria-label="ตัวกรองไกด์">{filterControls(false)}</div>
+        <div className="hidden min-w-0 flex-wrap items-start gap-5 pb-1 sm:flex" aria-label="ตัวกรองไกด์">{filterControls(true)}</div>
         <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground" aria-live="polite">
           <span>พบ {filtered.length} ไกด์</span>
           {activeFilters.map((filter) => <Button key={`${filter.name}-${filter.value}`} variant="secondary" size="xs"
@@ -290,10 +290,9 @@ function GuideToggleFilter({
 }) {
   return (
     <div className={showLabels ? "flex flex-col gap-2" : "shrink-0 border-l pl-2"}>
-      {showLabels ? <p className="text-sm font-medium">{label}</p> : null}
       <ToggleGroup aria-label={label} variant="outline" size="sm" multiple value={value} onValueChange={onChange} className={showLabels ? "flex flex-wrap justify-start" : undefined}>
         {options.map((option) => (
-          <ToggleGroupItem key={option} value={option} aria-label={`${label}: ${optionLabels[option] ?? option}`} title={`${label}: ${optionLabels[option] ?? option}`} className="aria-pressed:border-primary aria-pressed:bg-transparent aria-pressed:text-primary">
+          <ToggleGroupItem key={option} value={option} aria-label={`${label}: ${optionLabels[option] ?? option}`} title={`${label}: ${optionLabels[option] ?? option}`} className="max-sm:min-h-11 aria-pressed:border-primary aria-pressed:bg-transparent aria-pressed:text-primary">
             {optionIcon?.(option)}{showLabels ? optionLabels[option] ?? option : optionText?.(option)}
           </ToggleGroupItem>
         ))}