enhance search input

components/header-search.tsx

@@ -3,7 +3,7 @@
 import { useRef, useEffect, useCallback } from "react";
 import { useRouter, usePathname } from "next/navigation";
 import { motion } from "framer-motion";
-import { Search, X } from "lucide-react";
+import { Search, CornerDownLeft } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 /**
@@ -122,12 +122,6 @@ export function HeaderSearchButton({
     [handleSubmit, onExpandedChange],
   );
 
-  const collapse = useCallback(() => {
-    onExpandedChange(false);
-    queryRef.current = "";
-    if (inputRef.current) inputRef.current.value = "";
-  }, [onExpandedChange]);
-
   return (
     <div
       ref={containerRef}
@@ -146,19 +140,11 @@ export function HeaderSearchButton({
             opacity: { duration: 0.15 },
           }}
           className={cn(
-            "flex items-center gap-2 h-12 md:h-9 rounded-lg border border-border bg-background px-3 overflow-hidden",
+            "flex items-center gap-2 h-12 md:h-10 rounded-lg border border-border bg-background px-3 overflow-hidden",
             "max-md:w-full",
-            "md:w-70",
+            "md:w-100!",
           )}
         >
-          <button
-            type="button"
-            onClick={handleSubmit}
-            aria-label="Search"
-            className="shrink-0 text-muted-foreground hover:text-foreground transition-colors"
-          >
-            <Search className="size-5 md:size-4" />
-          </button>
           <input
             ref={inputRef}
             type="text"
@@ -172,11 +158,11 @@ export function HeaderSearchButton({
           />
           <button
             type="button"
-            onClick={collapse}
+            onClick={handleSubmit}
-            aria-label="Close search"
+            className="shrink-0 inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
-            className="shrink-0 text-muted-foreground hover:text-foreground transition-colors"
           >
-            <X className="size-3.5" />
+            Search
+            <CornerDownLeft className="size-3 opacity-70" />
           </button>
         </motion.div>
       ) : (