main layout

src/components/ui/Input.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  icon?: ReactNode;
+}
+
+export function Input({ label, icon, className = '', ...props }: InputProps) {
+  return (
+    <div className="flex flex-col gap-1">
+      {label && (
+        <label className="text-sm font-medium text-[#00293d]">{label}</label>
+      )}
+      <div className="relative">
+        {icon && (
+          <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
+            {icon}
+          </span>
+        )}
+        <input
+          className={`w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#00293d] focus:ring-2 focus:ring-[#00293d]/20 outline-none transition-all ${icon ? 'pl-10' : ''} ${className}`}
+          {...props}
+        />
+      </div>
+    </div>
+  );
+}