[FE] Implement UI for Student Setting

package.json

@@ -27,7 +27,8 @@
 		"react-dom": "19.0.0",
 		"react-icons": "5.4.0",
 		"tailwind-merge": "2.6.0",
-		"tailwindcss-animate": "1.0.7"
+		"tailwindcss-animate": "1.0.7",
+		"zod": "3.24.1"
 	},
 	"devDependencies": {
 		"@commitlint/cli": "19.6.1",

src/app/(learners)/setting/page.tsx

@@ -0,0 +1,29 @@
+import ProfileSettings from '@/components/learners/settings/ProfileSettings';
+
+/*
+ *  ======================================================================
+ *  Copyright (C) 2025 - lzaycoe (Lazy Code)
+ *  ======================================================================
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ *  ======================================================================
+ */
+export default function Home() {
+	return (
+		<div>
+			<ProfileSettings />
+		</div>
+	);
+}

src/components/commons/learners/NavigationBar.tsx

@@ -0,0 +1,83 @@
+/*
+ *  ======================================================================
+ *  Copyright (C) 2025 - lzaycoe (Lazy Code)
+ *  ======================================================================
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ *  ======================================================================
+ */
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import React from 'react';
+
+/*
+ *  ======================================================================
+ *  Copyright (C) 2025 - lzaycoe (Lazy Code)
+ *  ======================================================================
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ *  ======================================================================
+ */
+
+export default function NavigationBar() {
+	const pathname = usePathname();
+	const navItems = [
+		{ label: 'Dashboard', path: '/dashboard' },
+		{ label: 'Courses', path: '/courses' },
+		{ label: 'Teachers', path: '/teachers' },
+		{ label: 'Message', path: '/message' },
+		{ label: 'Wishlist', path: '/wishlist' },
+		{ label: 'Purchase History', path: '/purchase-history' },
+		{ label: 'Settings', path: '/setting' },
+	];
+
+	return (
+		<div className="bg-white">
+			<div className="max-w-7xl mx-auto px-4">
+				<nav className="bg-white w-full border border-[#FFDCD4]">
+					<div className="flex justify-between items-center">
+						{navItems.map((item) => (
+							<Link
+								key={item.label}
+								href={item.path}
+								className={`px-4 py-4 text-sm font-medium transition-colors ${
+									pathname === item.path
+										? 'text-[#FF6636] border-b-2 border-[#FF6636]'
+										: 'text-gray-600 hover:text-gray-900'
+								}`}
+							>
+								{item.label}
+							</Link>
+						))}
+					</div>
+				</nav>
+			</div>
+		</div>
+	);
+}

src/components/commons/learners/Profile.tsx

@@ -0,0 +1,62 @@
+/*
+ *  ======================================================================
+ *  Copyright (C) 2025 - lzaycoe (Lazy Code)
+ *  ======================================================================
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ *  ======================================================================
+ */
+import Image from 'next/image';
+
+export default function Profile() {
+	return (
+		<div className="bg-[#FFEEE8] pt-20">
+			<div className="max-w-7xl mx-auto px-4">
+				<div className="border border-[#FFDCD4] bg-white">
+					<header className="flex items-center gap-4 p-6">
+						<Image
+							src="/app/lazyavt.png"
+							alt="Lazy Code Logo"
+							width={80}
+							height={80}
+							className="rounded-lg"
+						/>
+						<div>
+							<h1 className="text-xl font-medium">Lazy Code</h1>
+							<p className="text-gray-500 text-sm">
+								Web Designer & Best-Selling Instructor
+							</p>
+						</div>
+						<button className="ml-auto bg-[#FFF1EC] text-[#FF6636] px-6 py-2.5 rounded-lg hover:bg-[#FFE4DB] transition-colors flex items-center gap-2">
+							Become Instructor
+							<svg
+								width="16"
+								height="16"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="2"
+								strokeLinecap="round"
+								strokeLinejoin="round"
+							>
+								<path d="M5 12h14m-7-7l7 7-7 7" />
+							</svg>
+						</button>
+					</header>
+				</div>
+			</div>
+		</div>
+	);
+}

src/components/learners/settings/PasswordChangeForm.tsx

@@ -0,0 +1,130 @@
+/*
+ *  ======================================================================
+ *  Copyright (C) 2025 - lzaycoe (Lazy Code)
+ *  ======================================================================
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ *  ======================================================================
+ */
+import { ZodError, z } from 'zod';
+
+const passwordSchema = z
+	.object({
+		currentPassword: z.string().min(1, 'Current password is required.'),
+		newPassword: z
+			.string()
+			.min(6, 'New password must be at least 6 characters long.'),
+		confirmPassword: z.string(),
+	})
+	.refine((data) => data.newPassword === data.confirmPassword, {
+		message: 'Passwords do not match.',
+		path: ['confirmPassword'],
+	});
+
+export default function PasswordChangeForm() {
+	const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+
+		const formData = new FormData(e.currentTarget);
+		const currentPassword = formData.get('currentPassword') as string;
+		const newPassword = formData.get('newPassword') as string;
+		const confirmPassword = formData.get('confirmPassword') as string;
+
+		try {
+			passwordSchema.parse({ currentPassword, newPassword, confirmPassword });
+			console.log('Form submitted successfully:', {
+				currentPassword,
+				newPassword,
+				confirmPassword,
+			});
+		} catch (err) {
+			if (err instanceof ZodError) {
+				alert(err.errors[0].message);
+			}
+		}
+	};
+
+	return (
+		<form onSubmit={handleSubmit} className="space-y-6 max-w-xl">
+			{/* Current Password */}
+			<div>
+				<label
+					htmlFor="currentPassword"
+					className="block text-sm mb-2 font-semibold"
+				>
+					Current Password
+				</label>
+				<div className="relative">
+					<input
+						id="currentPassword"
+						name="currentPassword"
+						type="password"
+						placeholder="Enter your current password"
+						className="w-full p-3 border border-gray-200 rounded-lg"
+						required
+					/>
+				</div>
+			</div>
+
+			{/* New Password */}
+			<div>
+				<label
+					htmlFor="newPassword"
+					className="block text-sm mb-2 font-semibold"
+				>
+					New Password
+				</label>
+				<div className="relative">
+					<input
+						id="newPassword"
+						name="newPassword"
+						type="password"
+						placeholder="Enter your new password"
+						className="w-full p-3 border border-gray-200 rounded-lg"
+						required
+					/>
+				</div>
+			</div>
+
+			{/* Confirm Password */}
+			<div>
+				<label
+					htmlFor="confirmPassword"
+					className="block text-sm mb-2 font-semibold"
+				>
+					Confirm Password
+				</label>
+				<div className="relative">
+					<input
+						id="confirmPassword"
+						name="confirmPassword"
+						type="password"
+						placeholder="Confirm your new password"
+						className="w-full p-3 border border-gray-200 rounded-lg"
+						required
+					/>
+				</div>
+			</div>
+
+			{/* Submit Button */}
+			<button
+				type="submit"
+				className="bg-[#FF6636] text-white px-6 py-2 rounded-lg hover:bg-[#CC522B] transition-colors"
+			>
+				Save Password
+			</button>
+		</form>
+	);
+}