352 lines
14 KiB
TypeScript
352 lines
14 KiB
TypeScript
import Layout from "@/components/Layout";
|
|
import { useAuth } from "@/contexts/AuthContext";
|
|
import { useEffect, useState } from "react";
|
|
import { useNavigate, Link } from "react-router-dom";
|
|
import {
|
|
Card,
|
|
CardHeader,
|
|
CardTitle,
|
|
CardDescription,
|
|
CardContent,
|
|
} from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Input } from "@/components/ui/input";
|
|
import LoadingScreen from "@/components/LoadingScreen";
|
|
import { aethexToast } from "@/lib/aethex-toast";
|
|
import {
|
|
GraduationCap,
|
|
Star,
|
|
Users,
|
|
Trophy,
|
|
Target,
|
|
Calendar,
|
|
MessageCircle,
|
|
ArrowRight,
|
|
Search,
|
|
BookOpen,
|
|
} from "lucide-react";
|
|
|
|
export default function MenteeHub() {
|
|
const { user, profile, loading } = useAuth();
|
|
const navigate = useNavigate();
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [mentors, setMentors] = useState<any[]>([
|
|
{
|
|
id: "1",
|
|
name: "ByteSage",
|
|
specialty: "Game Development",
|
|
bio: "10+ years shipping games across 8 platforms",
|
|
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=ByteSage",
|
|
rating: 4.9,
|
|
reviews: 48,
|
|
hourlyRate: "$50/hr",
|
|
availability: "Mon-Fri, 6-9pm EST",
|
|
students: 12,
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "AriaNova",
|
|
specialty: "Platform Engineering",
|
|
bio: "Lead architect at AeThex Platform",
|
|
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=AriaNova",
|
|
rating: 4.8,
|
|
reviews: 35,
|
|
hourlyRate: "$60/hr",
|
|
availability: "Flexible",
|
|
students: 8,
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "FluxPilot",
|
|
specialty: "Community & Growth",
|
|
bio: "Built communities of 100k+ creators",
|
|
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=FluxPilot",
|
|
rating: 4.7,
|
|
reviews: 52,
|
|
hourlyRate: "$45/hr",
|
|
availability: "Anytime",
|
|
students: 15,
|
|
},
|
|
]);
|
|
|
|
useEffect(() => {
|
|
if (!loading && !user) navigate("/login", { replace: true });
|
|
}, [loading, user, navigate]);
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setIsLoading(false);
|
|
}, 1000);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
const filteredMentors = mentors.filter(
|
|
(mentor) =>
|
|
mentor.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
mentor.specialty.toLowerCase().includes(searchTerm.toLowerCase()),
|
|
);
|
|
|
|
if (loading || isLoading) return <LoadingScreen />;
|
|
|
|
return (
|
|
<Layout>
|
|
<div className="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(110,141,255,0.12),transparent_60%)] py-10">
|
|
<div className="mx-auto w-full max-w-6xl px-4 lg:px-6 space-y-6">
|
|
{/* Header */}
|
|
<section className="rounded-3xl border border-border/40 bg-background/80 p-6 shadow-2xl backdrop-blur">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-semibold text-foreground">
|
|
Mentee Hub
|
|
</h1>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
Connect with experienced mentors and accelerate your growth
|
|
</p>
|
|
</div>
|
|
<div className="hidden sm:block p-3 rounded-2xl bg-gradient-to-br from-aethex-500/10 to-neon-blue/10">
|
|
<GraduationCap className="h-6 w-6 text-aethex-400" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Your Mentorship Stats */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<Card className="border-border/40 bg-background/80 backdrop-blur">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
|
Current Mentors
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">0</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-border/40 bg-background/80 backdrop-blur">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
|
Hours Completed
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">0</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-border/40 bg-background/80 backdrop-blur">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
|
Goals Achieved
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">0</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-border/40 bg-background/80 backdrop-blur">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
|
Progress
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">0%</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Quick Actions */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Card className="border-border/40 bg-gradient-to-br from-aethex-500/5 to-neon-blue/5 backdrop-blur shadow-lg">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<BookOpen className="h-5 w-5 text-aethex-400" />
|
|
Learning Path
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Set your learning goals and track progress
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Button className="w-full bg-aethex-500/20 hover:bg-aethex-500/30 text-aethex-300">
|
|
Create Learning Plan
|
|
<ArrowRight className="ml-2 h-4 w-4" />
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-border/40 bg-gradient-to-br from-green-500/5 to-emerald-500/5 backdrop-blur shadow-lg">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Trophy className="h-5 w-5 text-green-400" />
|
|
Programs
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Explore structured mentorship programs
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Button
|
|
asChild
|
|
className="w-full bg-green-500/20 hover:bg-green-500/30 text-green-300"
|
|
>
|
|
<Link to="/mentorship-programs">
|
|
Browse Programs
|
|
<ArrowRight className="ml-2 h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Find a Mentor */}
|
|
<section className="rounded-3xl border border-border/40 bg-background/80 p-6 shadow-2xl backdrop-blur">
|
|
<h2 className="text-2xl font-bold text-foreground mb-6">
|
|
Find Your Mentor
|
|
</h2>
|
|
|
|
{/* Search */}
|
|
<div className="mb-6 relative">
|
|
<Search className="absolute left-3 top-3 h-5 w-5 text-muted-foreground" />
|
|
<Input
|
|
placeholder="Search by name or specialty..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="pl-10 bg-background/60 border-border/40"
|
|
/>
|
|
</div>
|
|
|
|
{/* Mentors Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{filteredMentors.length === 0 ? (
|
|
<div className="col-span-full text-center py-12">
|
|
<p className="text-muted-foreground">
|
|
No mentors found matching your search
|
|
</p>
|
|
</div>
|
|
) : (
|
|
filteredMentors.map((mentor) => (
|
|
<Card
|
|
key={mentor.id}
|
|
className="group border-border/40 bg-background/80 backdrop-blur shadow-xl hover:shadow-2xl transition-all duration-300 hover:border-aethex-400/50 flex flex-col"
|
|
>
|
|
<CardHeader>
|
|
<div className="flex items-start gap-4">
|
|
<Avatar className="h-12 w-12">
|
|
<AvatarImage src={mentor.avatar} alt={mentor.name} />
|
|
<AvatarFallback>{mentor.name[0]}</AvatarFallback>
|
|
</Avatar>
|
|
<div className="flex-1 min-w-0">
|
|
<CardTitle className="group-hover:text-aethex-300 transition-colors">
|
|
{mentor.name}
|
|
</CardTitle>
|
|
<Badge variant="secondary" className="mt-1">
|
|
{mentor.specialty}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="flex-1 space-y-4">
|
|
<p className="text-sm text-muted-foreground line-clamp-2">
|
|
{mentor.bio}
|
|
</p>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2 text-sm">
|
|
<Star className="h-4 w-4 fill-yellow-500 text-yellow-500" />
|
|
<span>{mentor.rating}</span>
|
|
<span className="text-muted-foreground">
|
|
({mentor.reviews} reviews)
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm">
|
|
<Users className="h-4 w-4 text-aethex-400" />
|
|
<span>{mentor.students} active students</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm">
|
|
<Calendar className="h-4 w-4 text-muted-foreground" />
|
|
<span className="text-muted-foreground">
|
|
{mentor.availability}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-2 border-t border-border/40">
|
|
<p className="font-semibold text-aethex-300 mb-3">
|
|
{mentor.hourlyRate}
|
|
</p>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="flex-1 border-border/40 hover:bg-background/50"
|
|
>
|
|
<MessageCircle className="h-4 w-4 mr-2" />
|
|
Message
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
className="flex-1 bg-aethex-500/10 hover:bg-aethex-500/20 text-aethex-300"
|
|
>
|
|
Request
|
|
<ArrowRight className="h-4 w-4 ml-2" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Mentee Benefits */}
|
|
<section className="rounded-3xl border border-border/40 bg-background/80 p-6 shadow-2xl backdrop-blur">
|
|
<h2 className="text-2xl font-bold text-foreground mb-6">
|
|
Why Get a Mentor?
|
|
</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div className="p-4 rounded-xl bg-aethex-500/5 border border-aethex-500/20">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<Target className="h-5 w-5 text-aethex-400" />
|
|
<span className="font-semibold text-foreground">
|
|
Personalized Guidance
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
Get tailored advice based on your specific goals and
|
|
challenges
|
|
</p>
|
|
</div>
|
|
<div className="p-4 rounded-xl bg-neon-blue/5 border border-neon-blue/20">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<Trophy className="h-5 w-5 text-neon-blue/60" />
|
|
<span className="font-semibold text-foreground">
|
|
Accelerated Growth
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
Learn from experienced professionals and avoid common pitfalls
|
|
</p>
|
|
</div>
|
|
<div className="p-4 rounded-xl bg-green-500/5 border border-green-500/20">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<Users className="h-5 w-5 text-green-500/60" />
|
|
<span className="font-semibold text-foreground">
|
|
Network Building
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
Connect with industry leaders and expand your professional
|
|
network
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|