Created a profile editing page

src/components/Low/Input.tsx

@@ -5,11 +5,12 @@ interface Props {
 	required?: boolean;
 	label?: string;
 	placeholder?: string;
+	defaultValue?: string;
 	name: string;
 	onChange: (value: string) => void;
 }
 
-export default function Input({type, label, placeholder, name, required = false, onChange}: Props) {
+export default function Input({type, label, placeholder, name, required = false, defaultValue, onChange}: Props) {
 	const [showPassword, setShowPassword] = useState(false);
 
 	if (type === "password") {
@@ -55,6 +56,7 @@ export default function Input({type, label, placeholder, name, required = false,
 				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}
+				defaultValue={defaultValue}
 			/>
 		</div>
 	);

src/components/Navbar.tsx

@@ -1,4 +1,5 @@
 import {User} from "@/interfaces/user";
+import Link from "next/link";
 import {Avatar} from "primereact/avatar";
 
 interface Props {
@@ -12,10 +13,10 @@ export default function Navbar({user}: Props) {
 			<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 border border-mti-gray-platinum outline-none" />
-				<div className="flex gap-3 items-center justify-end">
+				<Link href="/profile" 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>
-				</div>
+				</Link>
 			</div>
 		</header>
 	);