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

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>
       )}