Update src/app/teachers/[id]/page.tsx
This commit is contained in:
@@ -1,307 +1,14 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
import { Star, MapPin, Clock, ChevronLeft, Users } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useParams } from "next/navigation";
|
||||
|
||||
const teachersData: Record<string, any> = {
|
||||
"1": {
|
||||
id: "1", name: "Ayşe Kaya", specialization: "Matematik", rating: 4.9,
|
||||
students: 250,
|
||||
bio: "10 yıl öğretim deneyimi ile üniversite giriş sınavlarına hazırlık konusunda uzman. Öğrencilerim %95 başarı oranı ile hedeflerine ulaşıyor.", image: "http://img.b2bpic.net/free-photo/young-female-glasses-workplace_1301-980.jpg", location: "İstanbul", availability: "Pazartesi-Cuma 18:00-22:00", hourlyRate: "₺150/saat", reviews: [
|
||||
{
|
||||
id: "1", author: "Ali Başkan", rating: 5,
|
||||
date: "15 Ocak 2025", text: "Ayşe öğretmen çok sabırlı ve açıklayıcı. Zor konuları çok iyi anlatıyor."},
|
||||
{
|
||||
id: "2", author: "Zeynep Şimşek", rating: 5,
|
||||
date: "20 Ocak 2025", text: "Dersleri çok eğlenceli ve etkili. Sınavda 20 puan artış yaşadım!"},
|
||||
{
|
||||
id: "3", author: "Emre Yilmaz", rating: 4,
|
||||
date: "22 Ocak 2025", text: "Profesyonel bir yaklaşım var. Çok memnun kaldım."},
|
||||
],
|
||||
similarTeachers: [
|
||||
{
|
||||
id: "2", name: "Mehmet Yıldız", specialization: "İngilizce", rating: 4.8,
|
||||
image: "http://img.b2bpic.net/free-photo/portrait-businessman-office-3_1262-1489.jpg"},
|
||||
{
|
||||
id: "3", name: "Zeynep Demir", specialization: "Kimya", rating: 4.7,
|
||||
image: "http://img.b2bpic.net/free-photo/woman-posing-with-books_23-2148680219.jpg"},
|
||||
],
|
||||
},
|
||||
"2": {
|
||||
id: "2", name: "Mehmet Yıldız", specialization: "İngilizce", rating: 4.8,
|
||||
students: 180,
|
||||
bio: "Amerikalı İngilizce öğretmeni, akıcı iletişim becerilerine odaklanır. Konuşma pratiği ve kültürel öğrenmeyi destekler.", image: "http://img.b2bpic.net/free-photo/portrait-businessman-office-3_1262-1489.jpg", location: "Ankara", availability: "Salı-Perşembe 17:00-21:00", hourlyRate: "₺120/saat", reviews: [
|
||||
{
|
||||
id: "1", author: "Selin Kara", rating: 5,
|
||||
date: "18 Ocak 2025", text: "İngilizce konuşmak artık çok daha doğal hissettiriyor. Müthiş bir öğretmen!"},
|
||||
{
|
||||
id: "2", author: "Deniz Güzel", rating: 5,
|
||||
date: "21 Ocak 2025", text: "Üst düzey derse hazırlanıyorum ve çok yardımcı oldu."},
|
||||
{
|
||||
id: "3", author: "Gül Yaşar", rating: 4,
|
||||
date: "23 Ocak 2025", text: "Güzel dersi var ama zaman sınırlı."},
|
||||
],
|
||||
similarTeachers: [
|
||||
{
|
||||
id: "1", name: "Ayşe Kaya", specialization: "Matematik", rating: 4.9,
|
||||
image: "http://img.b2bpic.net/free-photo/young-female-glasses-workplace_1301-980.jpg"},
|
||||
{
|
||||
id: "3", name: "Zeynep Demir", specialization: "Kimya", rating: 4.7,
|
||||
image: "http://img.b2bpic.net/free-photo/woman-posing-with-books_23-2148680219.jpg"},
|
||||
],
|
||||
},
|
||||
"3": {
|
||||
id: "3", name: "Zeynep Demir", specialization: "Kimya", rating: 4.7,
|
||||
students: 160,
|
||||
bio: "Laboratuvar deneyimli, interaktif öğrenme yönetimiyle başarı sağlar. Kimya konseptlerini pratik örneklerle açıklar.", image: "http://img.b2bpic.net/free-photo/woman-posing-with-books_23-2148680219.jpg", location: "İzmir", availability: "Pazartesi-Çarşamba 19:00-23:00", hourlyRate: "₺130/saat", reviews: [
|
||||
{
|
||||
id: "1", author: "Kerem Aslan", rating: 5,
|
||||
date: "16 Ocak 2025", text: "Kimya hiçbir zaman bu kadar kolay olmamıştı. Teşekkürler!"},
|
||||
{
|
||||
id: "2", author: "Nur Özcan", rating: 5,
|
||||
date: "19 Ocak 2025", text: "Sınavda başarılı oldum, çokça yardımı oldu."},
|
||||
{
|
||||
id: "3", author: "Hakan Demir", rating: 4,
|
||||
date: "24 Ocak 2025", text: "Güzel açıklamaları var."},
|
||||
],
|
||||
similarTeachers: [
|
||||
{
|
||||
id: "1", name: "Ayşe Kaya", specialization: "Matematik", rating: 4.9,
|
||||
image: "http://img.b2bpic.net/free-photo/young-female-glasses-workplace_1301-980.jpg"},
|
||||
{
|
||||
id: "2", name: "Mehmet Yıldız", specialization: "İngilizce", rating: 4.8,
|
||||
image: "http://img.b2bpic.net/free-photo/portrait-businessman-office-3_1262-1489.jpg"},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default function TeacherProfilePage({ params }: { params: { id: string } }) {
|
||||
const teacher = teachersData[params.id];
|
||||
const navItems = [
|
||||
{ name: "Ana Sayfa", id: "/" },
|
||||
{ name: "Öğretmenler", id: "/teachers" },
|
||||
{ name: "Etkinlikler", id: "events" },
|
||||
{ name: "Çalışma Programı", id: "schedule" },
|
||||
];
|
||||
|
||||
if (!teacher) {
|
||||
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 flex items-center justify-center">
|
||||
<h1 className="text-2xl font-light">Öğretmen bulunamadı</h1>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
export default function TeacherDetailPage() {
|
||||
const params = useParams();
|
||||
const id = params?.id;
|
||||
|
||||
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>
|
||||
|
||||
{/* Breadcrumb Navigation */}
|
||||
<div className="bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 pt-32 px-4 pb-8">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<nav className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-8">
|
||||
<Link href="/" className="hover:text-gray-900 dark:hover:text-gray-200 transition-colors">
|
||||
Ana Sayfa
|
||||
</Link>
|
||||
<span>/</span>
|
||||
<Link href="/teachers" className="hover:text-gray-900 dark:hover:text-gray-200 transition-colors">
|
||||
Öğretmenler
|
||||
</Link>
|
||||
<span>/</span>
|
||||
<span className="text-gray-900 dark:text-gray-100 font-medium">{teacher.name}</span>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 pb-20 px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{/* Teacher Profile Header */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
|
||||
{/* Image */}
|
||||
<div className="md:col-span-1">
|
||||
<div className="aspect-square rounded-lg overflow-hidden shadow-lg">
|
||||
<img src={teacher.image} alt={teacher.name} className="w-full h-full object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Teacher Info */}
|
||||
<div className="md:col-span-2">
|
||||
<h1 className="text-4xl font-light mb-2">{teacher.name}</h1>
|
||||
<p className="text-xl text-blue-600 dark:text-blue-400 font-medium mb-4">{teacher.specialization}</p>
|
||||
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Star className="w-5 h-5 fill-yellow-400 text-yellow-400" />
|
||||
<span className="text-lg font-semibold">{teacher.rating}</span>
|
||||
<span className="text-gray-600 dark:text-gray-400">({teacher.students} öğrenci)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">{teacher.bio}</p>
|
||||
|
||||
<div className="space-y-3 mb-8">
|
||||
<div className="flex items-center gap-3 text-gray-700 dark:text-gray-300">
|
||||
<MapPin className="w-5 h-5 text-blue-600 dark:text-blue-400" />
|
||||
<span>{teacher.location}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-gray-700 dark:text-gray-300">
|
||||
<Clock className="w-5 h-5 text-blue-600 dark:text-blue-400" />
|
||||
<span>{teacher.availability}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-3xl font-bold text-blue-600 dark:text-blue-400">{teacher.hourlyRate}</div>
|
||||
<button className="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
|
||||
Ders Ayırt Et
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Available Hours Section */}
|
||||
<section className="mb-16">
|
||||
<h2 className="text-3xl font-light mb-8">Uygun Saatler</h2>
|
||||
<div className="bg-white dark:bg-slate-800 rounded-lg shadow-lg p-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-7 gap-4">
|
||||
{[
|
||||
{ day: "Pazartesi", available: true },
|
||||
{ day: "Salı", available: true },
|
||||
{ day: "Çarşamba", available: true },
|
||||
{ day: "Perşembe", available: true },
|
||||
{ day: "Cuma", available: true },
|
||||
{ day: "Cumartesi", available: false },
|
||||
{ day: "Pazar", available: false },
|
||||
].map((d) => (
|
||||
<div
|
||||
key={d.day}
|
||||
className={`p-4 rounded-lg text-center ${
|
||||
d.available
|
||||
? "bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100"
|
||||
: "bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400"
|
||||
}`}
|
||||
>
|
||||
<div className="font-semibold">{d.day}</div>
|
||||
<div className="text-sm">{d.available ? "18:00 - 22:00" : "Müsait değil"}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Reviews Section */}
|
||||
<section className="mb-16">
|
||||
<h2 className="text-3xl font-light mb-8">Öğrenci Yorumları</h2>
|
||||
<div className="space-y-6">
|
||||
{teacher.reviews.map((review: any) => (
|
||||
<div key={review.id} className="bg-white dark:bg-slate-800 rounded-lg shadow-lg p-6">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg">{review.author}</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">{review.date}</p>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
className={`w-4 h-4 ${
|
||||
i < review.rating
|
||||
? "fill-yellow-400 text-yellow-400"
|
||||
: "text-gray-300 dark:text-gray-600"
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-700 dark:text-gray-300">{review.text}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Similar Teachers Section */}
|
||||
<section>
|
||||
<h2 className="text-3xl font-light mb-8">Benzer Öğretmenler</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{teacher.similarTeachers.map((similar: any) => (
|
||||
<Link
|
||||
key={similar.id}
|
||||
href={`/teachers/${similar.id}`}
|
||||
className="bg-white dark:bg-slate-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow overflow-hidden group cursor-pointer"
|
||||
>
|
||||
<div className="aspect-video overflow-hidden">
|
||||
<img
|
||||
src={similar.image}
|
||||
alt={similar.name}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<h3 className="text-xl font-semibold mb-2">{similar.name}</h3>
|
||||
<p className="text-blue-600 dark:text-blue-400 font-medium mb-3">{similar.specialization}</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
|
||||
<span className="font-medium">{similar.rating}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</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>
|
||||
<div>
|
||||
<h1>Teacher Detail Page - ID: {id}</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user