use headlessui components

marekzelinka · Feb 4, 2025 · 23cce40 · 23cce40
1 parent be6f960
commit 23cce40
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/app/components/search-bar.tsx b/app/components/search-bar.tsx
@@ -1,3 +1,4 @@
+import { Input } from "@headlessui/react";
 import { ArrowPathIcon, MagnifyingGlassIcon } from "@heroicons/react/16/solid";
 import { useEffect, useRef } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
@@ -39,13 +40,13 @@ export function SearchBar() {
   return (
     <Form>
       <div className="group grid grid-cols-1">
-        <input
+        <Input
           ref={searchInputRef}
           type="search"
           name="q"
           id="q"
           defaultValue={q ?? undefined}
-          className="col-start-1 row-start-1 w-full rounded-md bg-gray-700 py-1.5 pr-10 pl-10 text-base text-white outline-hidden placeholder:text-gray-400 focus:bg-white focus:text-gray-900 focus:scheme-light focus:placeholder:text-gray-400 sm:text-sm/6"
+          className="col-start-1 row-start-1 w-full rounded-md bg-gray-700 py-1.5 pr-10 pl-10 text-base text-white outline-hidden placeholder:text-gray-400 data-focus:bg-white data-focus:text-gray-900 data-focus:scheme-light data-focus:placeholder:text-gray-400 sm:text-sm/6"
           placeholder="Search"
           aria-label="Search users"
           aria-keyshortcuts={shortcut}

diff --git a/app/routes/search-result.tsx b/app/routes/search-result.tsx
@@ -1,4 +1,11 @@
-import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
+import {
+  Select,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+} from "@headlessui/react";
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
 import { ArrowTopRightOnSquareIcon } from "@heroicons/react/20/solid";
 import { RectangleStackIcon } from "@heroicons/react/24/outline";
@@ -67,20 +74,20 @@ export default function Results({ loaderData }: Route.ComponentProps) {
         className="space-y-3"
       >
         <div className="grid grid-cols-1 sm:hidden">
-          <select
+          <Select
             value={selectedTabIndex}
             onChange={(event) =>
               setSelectedTabIndex(Number(event.target.value))
             }
-            className="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-sky-600"
+            className="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 data-focus:outline-2 data-focus:-outline-offset-2 data-focus:outline-sky-600"
             aria-label="Select a tab"
           >
             {tabs.map((tab, index) => (
               <option key={tab.name} value={index}>
                 {tab.name}
               </option>
             ))}
-          </select>
+          </Select>
           <ChevronDownIcon className="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500" />
         </div>
         <TabList