refactor(search): add IconInput size variant and adopt across search bars

app/(main)/page.tsx

@@ -2,7 +2,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
+import { IconInput } from "@/components/ui/icon-input"
 import { listGames, listPlayers, listShops } from "@/lib/api"
 import { GameIcon } from "@/lib/game-icons"
 import { ArrowRight, Search, ShoppingBag, Star } from "lucide-react"
@@ -30,17 +30,15 @@ export default function HomePage() {
           </div>
 
           <div id="discover-search" className="w-full max-w-2xl mx-auto">
-            <form action="/search" className="relative flex items-center w-full max-w-xl mx-auto">
+            <form action="/search" className="w-full max-w-xl mx-auto">
-              <Search className="absolute left-4 h-5 w-5 text-muted-foreground z-10" />
+              <IconInput
-              <Input
+                inputSize="lg"
+                icon={<Search />}
                 type="text"
                 name="q"
                 placeholder="搜索陪玩、店铺、游戏..."
-                className="w-full h-12 pl-12 pr-24 rounded-xl border-border bg-card text-base shadow-[var(--shadow-card)] transition-shadow focus:shadow-[var(--shadow-card-hover)]"
+                className="w-full border-border bg-card shadow-[var(--shadow-card)] transition-shadow focus:shadow-[var(--shadow-card-hover)]"
               />
-              <Button type="submit" className="absolute right-1.5 rounded-lg px-6 h-9">
-                搜索
-              </Button>
             </form>
           </div>
         </div>

app/(main)/search/page.tsx

@@ -5,6 +5,7 @@ import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
 import { Checkbox } from "@/components/ui/checkbox"
+import { IconInput } from "@/components/ui/icon-input"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import {
@@ -560,12 +561,13 @@ function SearchPageContent() {
         </div>
 
         <div className="flex items-center gap-2 w-full md:w-auto">
-          <div className="relative flex-1 md:w-80">
+          <div className="flex-1 md:w-80">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground z-10" />
+            <IconInput
-            <Input
+              inputSize="lg"
+              icon={<Search />}
               type="search"
               placeholder="搜索陪玩、游戏、标签..."
-              className="pl-9 h-12 rounded-xl border-border bg-card text-base shadow-[var(--shadow-card)] transition-shadow focus:shadow-[var(--shadow-card-hover)]"
+              className="border-border bg-card shadow-[var(--shadow-card)] transition-shadow focus:shadow-[var(--shadow-card-hover)]"
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
             />

components/ui/icon-input.tsx

@@ -6,17 +6,38 @@ import { Input } from "./input"
 interface IconInputProps extends React.ComponentProps<"input"> {
   icon?: React.ReactNode
   rightElement?: React.ReactNode
+  inputSize?: "default" | "lg"
 }
 
-function IconInput({ icon, rightElement, className, ...props }: IconInputProps) {
+function IconInput({
+  icon,
+  rightElement,
+  inputSize = "default",
+  className,
+  ...props
+}: IconInputProps) {
+  const isLg = inputSize === "lg"
   return (
     <div className="relative">
       {icon && (
-        <div className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground [&_svg]:size-4">
+        <div
+          className={cn(
+            "pointer-events-none absolute top-1/2 -translate-y-1/2 text-muted-foreground",
+            isLg ? "left-4 [&_svg]:size-5" : "left-3 [&_svg]:size-4",
+          )}
+        >
           {icon}
         </div>
       )}
-      <Input className={cn(icon && "pl-10", rightElement && "pr-10", className)} {...props} />
+      <Input
+        className={cn(
+          isLg && "h-12 rounded-xl text-base",
+          icon && (isLg ? "pl-12" : "pl-10"),
+          rightElement && "pr-10",
+          className,
+        )}
+        {...props}
+      />
       {rightElement && (
         <div className="absolute right-3 top-1/2 -translate-y-1/2">{rightElement}</div>
       )}