Add src/app/students/page.tsx
This commit is contained in:
330
src/app/students/page.tsx
Normal file
330
src/app/students/page.tsx
Normal file
@@ -0,0 +1,330 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import Input from "@/components/form/Input";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
import { Mail } from "lucide-react";
|
||||
|
||||
interface FormErrors {
|
||||
firstName?: string;
|
||||
lastName?: string;
|
||||
email?: string;
|
||||
grade?: string;
|
||||
learningGoals?: string;
|
||||
}
|
||||
|
||||
export default function StudentRegistrationPage() {
|
||||
const navItems = [
|
||||
{ name: "Ana Sayfa", id: "/" },
|
||||
{ name: "Öğretmenler", id: "/teachers" },
|
||||
{ name: "Öğrenciler", id: "/students" },
|
||||
{ name: "Çalışma Programı", id: "schedule" },
|
||||
];
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
firstName: "", lastName: "", email: "", grade: "", learningGoals: ""});
|
||||
|
||||
const [errors, setErrors] = useState<FormErrors>({});
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const validateForm = (): boolean => {
|
||||
const newErrors: FormErrors = {};
|
||||
|
||||
if (!formData.firstName.trim()) {
|
||||
newErrors.firstName = "Ad gereklidir";
|
||||
}
|
||||
|
||||
if (!formData.lastName.trim()) {
|
||||
newErrors.lastName = "Soyadı gereklidir";
|
||||
}
|
||||
|
||||
if (!formData.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
|
||||
newErrors.email = "Geçerli bir email adı girin";
|
||||
}
|
||||
|
||||
if (!formData.grade.trim()) {
|
||||
newErrors.grade = "Sınıf seçiniz";
|
||||
}
|
||||
|
||||
if (!formData.learningGoals.trim()) {
|
||||
newErrors.learningGoals = "Öğrenme hedefleri gereklidir";
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
// Simulate API call
|
||||
setTimeout(() => {
|
||||
console.log("Form submitted:", formData);
|
||||
setSubmitted(true);
|
||||
setIsSubmitting(false);
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setFormData({
|
||||
firstName: "", lastName: "", email: "", grade: "", learningGoals: ""});
|
||||
setErrors({});
|
||||
setSubmitted(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Öğretmen Platformu"
|
||||
bottomLeftText="Eğitim Topluluğu"
|
||||
bottomRightText="info@platform.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-12 px-4 pt-32">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl font-bold text-slate-900 mb-2">Öğrenci Kaydı</h1>
|
||||
<p className="text-lg text-slate-600">Eğitim yolculuğunuza katılın ve size uygun öğretmen bulun</p>
|
||||
</div>
|
||||
|
||||
{/* Success Message */}
|
||||
{submitted ? (
|
||||
<div className="bg-white rounded-lg shadow-lg p-12 text-center">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-6">
|
||||
<svg
|
||||
className="w-8 h-8 text-green-600"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-slate-900 mb-2">Kayıt Başarılı!</h2>
|
||||
<p className="text-slate-600 mb-6">
|
||||
Merhaba <strong>{formData.firstName} {formData.lastName}</strong>, kaydınız başarıyla tamamlanmıştır.
|
||||
</p>
|
||||
<p className="text-slate-600 mb-8">
|
||||
En yakın zamanda size uygun öğretmen önerileri gönderilecektir. Lütfen email kutunuzu kontrol edin.
|
||||
</p>
|
||||
<button
|
||||
onClick={handleReset}
|
||||
className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition"
|
||||
>
|
||||
Yeni Kayıt
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
/* Registration Form */
|
||||
<form onSubmit={handleSubmit} className="bg-white rounded-lg shadow-lg p-8">
|
||||
<div className="space-y-6">
|
||||
{/* First Name */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Ad *</label>
|
||||
<Input
|
||||
value={formData.firstName}
|
||||
onChange={(value) => {
|
||||
setFormData({ ...formData, firstName: value });
|
||||
if (errors.firstName) {
|
||||
setErrors({ ...errors, firstName: undefined });
|
||||
}
|
||||
}}
|
||||
type="text"
|
||||
placeholder="Adınız"
|
||||
required
|
||||
/>
|
||||
{errors.firstName && (
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<span className="text-red-500">⚠</span>
|
||||
<p className="text-red-600 text-sm">{errors.firstName}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Last Name */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Soyadı *</label>
|
||||
<Input
|
||||
value={formData.lastName}
|
||||
onChange={(value) => {
|
||||
setFormData({ ...formData, lastName: value });
|
||||
if (errors.lastName) {
|
||||
setErrors({ ...errors, lastName: undefined });
|
||||
}
|
||||
}}
|
||||
type="text"
|
||||
placeholder="Soyadınız"
|
||||
required
|
||||
/>
|
||||
{errors.lastName && (
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<span className="text-red-500">⚠</span>
|
||||
<p className="text-red-600 text-sm">{errors.lastName}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Email Adresi *</label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
value={formData.email}
|
||||
onChange={(value) => {
|
||||
setFormData({ ...formData, email: value });
|
||||
if (errors.email) {
|
||||
setErrors({ ...errors, email: undefined });
|
||||
}
|
||||
}}
|
||||
type="email"
|
||||
placeholder="example@email.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{errors.email ? (
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<span className="text-red-500">⚠</span>
|
||||
<p className="text-red-600 text-sm">{errors.email}</p>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-slate-500 text-sm mt-2">Güvenli ve gizli tutulacaktır</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Grade Level */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Sınıf Seviyesi *</label>
|
||||
<select
|
||||
value={formData.grade}
|
||||
onChange={(e) => {
|
||||
setFormData({ ...formData, grade: e.target.value });
|
||||
if (errors.grade) {
|
||||
setErrors({ ...errors, grade: undefined });
|
||||
}
|
||||
}}
|
||||
className="w-full px-4 py-2 bg-slate-100 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-slate-900"
|
||||
required
|
||||
>
|
||||
<option value="">Sınıf seçiniz</option>
|
||||
<option value="primary">İlkokul (1-4)</option>
|
||||
<option value="middle">Ortaokul (5-8)</option>
|
||||
<option value="high">Lise (9-12)</option>
|
||||
<option value="university">Üniversite</option>
|
||||
<option value="adult">Yetişkinler</option>
|
||||
</select>
|
||||
{errors.grade && (
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<span className="text-red-500">⚠</span>
|
||||
<p className="text-red-600 text-sm">{errors.grade}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Learning Goals */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Öğrenme Hedefleri *</label>
|
||||
<textarea
|
||||
value={formData.learningGoals}
|
||||
onChange={(e) => {
|
||||
setFormData({ ...formData, learningGoals: e.target.value });
|
||||
if (errors.learningGoals) {
|
||||
setErrors({ ...errors, learningGoals: undefined });
|
||||
}
|
||||
}}
|
||||
placeholder="Ne öğrenmek istiyorsunuz? Örn: Matematik becerilerimi geliştirmek, İngilizce konuşmayı öğrenmek..."
|
||||
rows={4}
|
||||
className="w-full px-4 py-2 bg-slate-100 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none text-slate-900"
|
||||
required
|
||||
/>
|
||||
{errors.learningGoals ? (
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<span className="text-red-500">⚠</span>
|
||||
<p className="text-red-600 text-sm">{errors.learningGoals}</p>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-slate-500 text-sm mt-2">Hedefleriniz, size doğru öğretmen bulunması için önemlidir</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Terms Agreement */}
|
||||
<div className="flex items-start gap-3 p-4 bg-blue-50 rounded-lg">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="terms"
|
||||
className="mt-1 w-4 h-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
|
||||
defaultChecked
|
||||
/>
|
||||
<label htmlFor="terms" className="text-sm text-slate-700">
|
||||
Kullanım şartlarını ve gizlilik politikasını kabul ediyorum
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<div className="mt-8">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="w-full px-6 py-3 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-lg font-medium transition flex items-center justify-center gap-2"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
Kaydediliyor...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Mail size={20} />
|
||||
Kaydı Tamamla
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Login Link */}
|
||||
<p className="text-center text-slate-600 mt-6">
|
||||
Zaten kayıtlı mısınız?{" "}
|
||||
<a href="/" className="text-blue-600 hover:text-blue-700 font-medium">
|
||||
Giriş yapın
|
||||
</a>
|
||||
</p>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Öğretmen Platformu"
|
||||
leftLink={{
|
||||
text: "Gizlilik Politikası", href: "#"}}
|
||||
rightLink={{
|
||||
text: "Kullanım Şartları", href: "#"}}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user