Extracted the Input into its own component

src/components/Low/Input.tsx

@@ -0,0 +1,61 @@
+import {useState} from "react";
+
+interface Props {
+	type: "email" | "text" | "password";
+	required?: boolean;
+	label?: string;
+	placeholder?: string;
+	name: string;
+	onChange: (value: string) => void;
+}
+
+export default function Input({type, label, placeholder, name, required = false, onChange}: Props) {
+	const [showPassword, setShowPassword] = useState(false);
+
+	if (type === "password") {
+		return (
+			<div className="relative flex flex-col gap-3 w-full">
+				{label && (
+					<label className="font-normal text-base text-mti-gray-dim">
+						{label}
+						{required ? " *" : ""}
+					</label>
+				)}
+				<div className="w-full h-fit relative">
+					<input
+						type={showPassword ? "text" : "password"}
+						name={name}
+						onChange={(e) => onChange(e.target.value)}
+						placeholder={placeholder}
+						className="w-full px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
+					/>
+					<p
+						role="button"
+						onClick={() => setShowPassword((prev) => !prev)}
+						className="text-xs cursor-pointer absolute bottom-1/2 translate-y-1/2 right-8">
+						{showPassword ? "Hide" : "Show"}
+					</p>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex flex-col gap-3 w-full">
+			{label && (
+				<label className="font-normal text-base text-mti-gray-dim">
+					{label}
+					{required ? " *" : ""}
+				</label>
+			)}
+			<input
+				type={type}
+				name={name}
+				onChange={(e) => onChange(e.target.value)}
+				placeholder={placeholder}
+				className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
+				required={required}
+			/>
+		</div>
+	);
+}

src/components/Navbar.tsx

@@ -11,7 +11,7 @@ export default function Navbar({user}: Props) {
 		<header className="w-full bg-transparent py-4 gap-2 flex items-center">
 			<h1 className="font-bold text-2xl w-1/6 px-8">eCrop</h1>
 			<div className="flex justify-between w-5/6 mr-8">
-				<input type="text" placeholder="Search..." className="rounded-full py-4 px-6 shadow-lg shadow-neutral-200 outline-none" />
+				<input type="text" placeholder="Search..." className="rounded-full py-4 px-6 border border-mti-gray-platinum outline-none" />
 				<div className="flex gap-3 items-center justify-end">
 					<img src={user.profilePicture} alt={user.name} className="w-10 h-10 rounded-full" />
 					<span className="text-right">{user.name}</span>