feat: implement staff directory list view with search and filters

apps/web/src/common/components/ui/input.tsx

@@ -1,18 +1,49 @@
 import * as React from "react"
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+import { cn } from "@/lib/utils"
+
+/**
+ * Input component based on Shadcn UI.
+ * A basic input field with consistent styling.
+ */
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  leadingIcon?: React.ReactNode
+  trailingIcon?: React.ReactNode
+}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => (
-    <input
-      type={type}
-      className={`flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-colors ${className || ''}`}
-      ref={ref}
-      {...props}
-    />
-  )
+  ({ className, type, leadingIcon, trailingIcon, ...props }, ref) => {
+    return (
+      <div className="relative w-full group">
+        {leadingIcon && (
+          <div className="absolute left-4 top-1/2 -translate-y-1/2 flex items-center justify-center pointer-events-none text-muted-foreground/60 group-focus-within:text-primary transition-colors">
+            <div className="w-4 h-4 flex items-center justify-center">
+              {leadingIcon}
+            </div>
+          </div>
+        )}
+        <input
+          type={type}
+          className={cn(
+            "flex h-12 w-full rounded-xl border border-input bg-white/70 px-4 py-3 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:border-primary focus-visible:bg-white transition-all duration-300 disabled:cursor-not-allowed disabled:opacity-50",
+            leadingIcon && "pl-11",
+            trailingIcon && "pr-11",
+            className
+          )}
+          ref={ref}
+          {...props}
+        />
+        {trailingIcon && (
+          <div className="absolute right-4 top-1/2 -translate-y-1/2 flex items-center justify-center pointer-events-none text-muted-foreground/60 group-focus-within:text-primary transition-colors">
+            <div className="w-4 h-4 flex items-center justify-center">
+              {trailingIcon}
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  }
 )
 Input.displayName = "Input"
 
-export { Input }
+export { Input }