feat: Enhanced SpaceFinder Component with Accessibility and UX Improvements

src/components/SpaceFinder.tsx

@@ -1,9 +1,9 @@
-import type { Space } from '@w3ui/react'
+import type { Space } from "@w3ui/react"
 
-import React, { Fragment, useState } from 'react'
-import { Combobox, Transition } from '@headlessui/react'
-import { ChevronUpDownIcon } from '@heroicons/react/20/solid'
-import { shortenDID } from '@/lib'
+import React, { Fragment, useState } from "react"
+import { Combobox, Transition } from "@headlessui/react"
+import { ChevronDownIcon } from "@heroicons/react/20/solid"
+import { shortenDID } from "@/lib"
 
 interface SpaceFinderProps {
   spaces: Space[]
@@ -12,22 +12,22 @@ interface SpaceFinderProps {
   className?: string
 }
 
-export function SpaceFinder ({
+export function SpaceFinder({
   spaces,
   selected,
   setSelected,
-  className = ''
+  className = "",
 }: SpaceFinderProps): JSX.Element {
-  const [query, setQuery] = useState('')
+  const [query, setQuery] = useState("")
   const filtered =
-    query === ''
+    query === ""
       ? spaces
       : spaces.filter((space: Space) =>
-        (space.name || space.did())
-          .toLowerCase()
-          .replace(/\s+/g, '')
-          .includes(query.toLowerCase().replace(/\s+/g, ''))
-      )
+          (space.name || space.did())
+            .toLowerCase()
+            .replace(/\s+/g, "")
+            .includes(query.toLowerCase().replace(/\s+/g, ""))
+        )
 
   return (
     <div className={`${className}`}>
@@ -36,44 +36,51 @@ export function SpaceFinder ({
         onChange={setSelected}
         by={(a, b) => a?.did() === b?.did()}
       >
-        <div className='relative mt-1'>
-          <div className='relative w-full overflow-hidden rounded-md bg-white text-left shadow-md'>
+        <div className="relative mt-1">
+          <div className="relative w-full overflow-hidden rounded-md bg-white text-left shadow-md">
             <Combobox.Input
-              className='w-full border-none py-2 pl-3 pr-10 text-sm text-gray-900'
-              displayValue={(space: Space) => space.name || shortenDID(space.did())}
-              onChange={(event) => { setQuery(event.target.value) }}
+              className="w-full border-none py-2 pl-3 pr-10 text-sm text-gray-900"
+              displayValue={(space: Space) =>
+                space.name || shortenDID(space.did())
+              }
+              onChange={(event) => {
+                setQuery(event.target.value)
+              }}
+              placeholder="Select your space"
             />
-            <Combobox.Button className='absolute inset-y-0 right-0 flex items-center pl-1 pr-2'>
-              <ChevronUpDownIcon
-                className='h-5 w-5 text-gray-400'
-                aria-hidden='true'
+            <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pl-1 pr-2">
+              <ChevronDownIcon
+                className="h-5 w-5 text-gray-400"
+                aria-hidden="true"
               />
             </Combobox.Button>
           </div>
           <Transition
             as={Fragment}
-            leave='transition ease-in duration-100'
-            leaveFrom='opacity-100'
-            leaveTo='opacity-0'
-            afterLeave={() => { setQuery('') }}
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+            afterLeave={() => {
+              setQuery("")
+            }}
           >
             <Combobox.Options
-              className='absolute mt-1 max-h-96 w-full bg-white rounded-md pt-1 shadow-lg overflow-scroll z-10'
+              className="absolute mt-1 max-h-96 w-full bg-white rounded-md pt-1 shadow-lg overflow-scroll z-10"
               static
             >
-              {filtered.length === 0 && query !== ''
-                ? (
-                <div className='relative select-non py-2 px-4 font-mono text-sm text-red-500'>
+              {filtered.length === 0 && query !== "" ? (
+                <div className="relative select-non py-2 px-4 font-mono text-sm text-red-500">
                   (╯°□°)╯︵ ┻━┻
                 </div>
-                  )
-                : (
-                    filtered.map((space) => (
+              ) : (
+                filtered.map((space) => (
                   <Combobox.Option
                     key={space.did()}
                     className={({ active }) =>
                       `relative select-none py-2 pl-9 pr-4 ${
-                        active ? 'bg-hot-yellow-light cursor-pointer text-hot-red' : 'text-black'
+                        active
+                          ? "bg-hot-yellow-light cursor-pointer text-hot-red"
+                          : "text-black"
                       }`
                     }
                     value={space}
@@ -82,27 +89,25 @@ export function SpaceFinder ({
                       <>
                         <span
                           className={`block overflow-hidden text-ellipsis whitespace-nowrap ${
-                            selected ? 'font-medium' : ''
+                            selected ? "font-medium" : ""
                           }`}
                         >
                           {space.name || shortenDID(space.did())}
                         </span>
-                        {selected
-                          ? (
+                        {selected ? (
                           <span
                             className={`absolute inset-y-0 left-0 flex items-center pl-3 ${
-                              active ? '' : ''
+                              active ? "" : ""
                             }`}
                           >
                             ⁂
                           </span>
-                            )
-                          : null}
+                        ) : null}
                       </>
                     )}
                   </Combobox.Option>
-                    ))
-                  )}
+                ))
+              )}
             </Combobox.Options>
           </Transition>
         </div>