Create Mentee Hub page for mentorship
cgen-f766615bc4894947b0f42bae17db2f7b
This commit is contained in:
Builder.io
parent
ce0e0de4a0
commit
dd60ab1d92
1 changed files with 352 additions and 0 deletions
352
client/pages/MenteeHub.tsx
Normal file
352
client/pages/MenteeHub.tsx
Normal file
|
|
@ -0,0 +1,352 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue