chore: clear search button (#91)

Author: PatrickDinh

src/features/common/components/command.tsx

@@ -4,6 +4,8 @@ import { MagnifyingGlassIcon } from '@radix-ui/react-icons'
 import { Command as CommandPrimitive } from 'cmdk'
 import { Dialog, DialogContent } from '@/features/common/components/dialog'
 import { cn } from '../utils'
+import { XIcon } from 'lucide-react'
+import { Button } from '@/features/common/components/button'
 
 const Command = React.forwardRef<React.ElementRef<typeof CommandPrimitive>, React.ComponentPropsWithoutRef<typeof CommandPrimitive>>(
   ({ className, ...props }, ref) => (
@@ -30,10 +32,15 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   )
 }
 
+const clearSearchButtonLabel = 'Clear search'
 const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
+    // CmdK doesn't have the option to specify search type input
+    // so we handle it ourselves
+    onSearchClear?: () => void
+  }
+>(({ className, onSearchClear, ...props }, ref) => (
   <div className="flex items-center px-3" cmdk-input-wrapper="">
     <MagnifyingGlassIcon className="mr-2 size-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
@@ -44,6 +51,17 @@ const CommandInput = React.forwardRef<
       )}
       {...props}
     />
+    {onSearchClear && (
+      <Button
+        onClick={onSearchClear}
+        variant="no-style"
+        size="icon"
+        aria-label={clearSearchButtonLabel}
+        className={cn('size-4 text-muted-foreground')}
+      >
+        <XIcon size={'1rem'} />
+      </Button>
+    )}
   </div>
 ))
 

src/features/search/components/search.tsx

@@ -60,7 +60,13 @@ export function Search() {
 
   return (
     <Command className={cn('bg-card text-card-foreground w-80 h-auto z-20 border')} shouldFilter={false} loop>
-      <CommandInput placeholder={searchPlaceholderLabel} value={term} onValueChange={handleInput} ref={searchInputRef} />
+      <CommandInput
+        placeholder={searchPlaceholderLabel}
+        value={term}
+        onValueChange={handleInput}
+        ref={searchInputRef}
+        onSearchClear={clearTerm}
+      />
       <CommandList>
         <RenderLoadable
           loadable={loadableResults}