264 lines
8.1 KiB
TypeScript
264 lines
8.1 KiB
TypeScript
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Users,
|
|
Calendar,
|
|
CheckCircle,
|
|
Clock,
|
|
MessageCircle,
|
|
ArrowRight,
|
|
} from "lucide-react";
|
|
|
|
export interface Mentor {
|
|
id: string;
|
|
name: string;
|
|
title?: string;
|
|
bio?: string;
|
|
avatar_url?: string;
|
|
specialties?: string[];
|
|
}
|
|
|
|
export interface MentorshipStatus {
|
|
id: string;
|
|
type: "mentee" | "mentor";
|
|
status: "active" | "paused" | "completed";
|
|
mentee?: Mentor;
|
|
mentor?: Mentor;
|
|
start_date?: string;
|
|
end_date?: string;
|
|
sessions_completed?: number;
|
|
next_session?: string;
|
|
}
|
|
|
|
interface MentorshipWidgetProps {
|
|
mentorship: MentorshipStatus | null;
|
|
title?: string;
|
|
description?: string;
|
|
onRequestMentor?: () => void;
|
|
onScheduleSession?: () => void;
|
|
onViewProfile?: () => void;
|
|
accentColor?: "red" | "blue" | "purple";
|
|
}
|
|
|
|
const colorMap = {
|
|
red: {
|
|
bg: "bg-gradient-to-br from-red-950/40 to-red-900/20",
|
|
border: "border-red-500/20",
|
|
},
|
|
blue: {
|
|
bg: "bg-gradient-to-br from-blue-950/40 to-blue-900/20",
|
|
border: "border-blue-500/20",
|
|
},
|
|
purple: {
|
|
bg: "bg-gradient-to-br from-purple-950/40 to-purple-900/20",
|
|
border: "border-purple-500/20",
|
|
},
|
|
};
|
|
|
|
export function MentorshipWidget({
|
|
mentorship,
|
|
title = "My Mentorship",
|
|
description = "Connect with experienced mentors",
|
|
onRequestMentor,
|
|
onScheduleSession,
|
|
onViewProfile,
|
|
accentColor = "red",
|
|
}: MentorshipWidgetProps) {
|
|
const colors = colorMap[accentColor];
|
|
const person =
|
|
mentorship?.type === "mentor" ? mentorship.mentor : mentorship?.mentee;
|
|
|
|
if (!mentorship) {
|
|
return (
|
|
<Card className={`${colors.bg} border ${colors.border}`}>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Users className="h-5 w-5" />
|
|
{title}
|
|
</CardTitle>
|
|
<CardDescription>{description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-center py-12 space-y-4">
|
|
<Users className="h-12 w-12 mx-auto text-gray-500 opacity-50" />
|
|
<div>
|
|
<p className="text-gray-400 mb-2">No active mentorship</p>
|
|
<p className="text-sm text-gray-500 mb-4">
|
|
{title.includes("Mentorship")
|
|
? "Connect with an experienced mentor or become one yourself"
|
|
: ""}
|
|
</p>
|
|
</div>
|
|
{onRequestMentor && (
|
|
<Button
|
|
onClick={onRequestMentor}
|
|
className="bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700"
|
|
>
|
|
<Users className="h-4 w-4 mr-2" />
|
|
Request a Mentor
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Card className={`${colors.bg} border ${colors.border}`}>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Users className="h-5 w-5" />
|
|
{title}
|
|
</CardTitle>
|
|
<CardDescription>
|
|
{mentorship.type === "mentor"
|
|
? "Mentoring someone"
|
|
: "Being mentored by"}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
{/* Status Badge */}
|
|
<div>
|
|
<Badge
|
|
className={
|
|
mentorship.status === "active"
|
|
? "bg-green-600/50 text-green-100"
|
|
: mentorship.status === "paused"
|
|
? "bg-yellow-600/50 text-yellow-100"
|
|
: "bg-gray-600/50 text-gray-100"
|
|
}
|
|
>
|
|
{mentorship.status === "active" ? "🟢" : "⏸"}{" "}
|
|
{mentorship.status.charAt(0).toUpperCase() +
|
|
mentorship.status.slice(1)}
|
|
</Badge>
|
|
</div>
|
|
|
|
{/* Person Card */}
|
|
{person && (
|
|
<div className="p-4 bg-black/30 rounded-lg border border-gray-500/10 space-y-4">
|
|
{/* Profile */}
|
|
<div className="flex items-start gap-4">
|
|
{person.avatar_url && (
|
|
<img
|
|
src={person.avatar_url}
|
|
alt={person.name}
|
|
className="w-16 h-16 rounded-lg object-cover flex-shrink-0"
|
|
/>
|
|
)}
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="font-semibold text-white">{person.name}</h3>
|
|
{person.title && (
|
|
<p className="text-sm text-gray-400">{person.title}</p>
|
|
)}
|
|
{person.bio && (
|
|
<p className="text-xs text-gray-500 mt-2">{person.bio}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Specialties */}
|
|
{person.specialties && person.specialties.length > 0 && (
|
|
<div className="space-y-2">
|
|
<p className="text-xs font-semibold text-gray-300 uppercase">
|
|
Specialties
|
|
</p>
|
|
<div className="flex gap-1 flex-wrap">
|
|
{person.specialties.slice(0, 4).map((specialty) => (
|
|
<Badge
|
|
key={specialty}
|
|
className="bg-gray-600/30 text-gray-200 text-xs"
|
|
>
|
|
{specialty}
|
|
</Badge>
|
|
))}
|
|
{person.specialties.length > 4 && (
|
|
<Badge className="bg-gray-600/30 text-gray-200 text-xs">
|
|
+{person.specialties.length - 4}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Session Info */}
|
|
<div className="grid grid-cols-2 gap-4 p-3 bg-black/20 rounded-lg">
|
|
{mentorship.sessions_completed !== undefined && (
|
|
<div className="text-center">
|
|
<p className="text-xs text-gray-400">Sessions</p>
|
|
<p className="text-lg font-bold text-white">
|
|
{mentorship.sessions_completed}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{mentorship.next_session && (
|
|
<div className="text-center">
|
|
<p className="text-xs text-gray-400">Next Session</p>
|
|
<p className="text-sm font-semibold text-white">
|
|
{new Date(mentorship.next_session).toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{mentorship.start_date && (
|
|
<div className="text-center">
|
|
<p className="text-xs text-gray-400">Started</p>
|
|
<p className="text-sm font-semibold text-white">
|
|
{new Date(mentorship.start_date).toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{mentorship.end_date && (
|
|
<div className="text-center">
|
|
<p className="text-xs text-gray-400">Ends</p>
|
|
<p className="text-sm font-semibold text-white">
|
|
{new Date(mentorship.end_date).toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{onScheduleSession && (
|
|
<Button
|
|
onClick={onScheduleSession}
|
|
className="bg-blue-600 hover:bg-blue-700 text-sm"
|
|
>
|
|
<Calendar className="h-3 w-3 mr-1" />
|
|
Schedule
|
|
</Button>
|
|
)}
|
|
{onViewProfile && (
|
|
<Button
|
|
onClick={onViewProfile}
|
|
variant="outline"
|
|
className="border-gray-500/20 text-gray-300 hover:bg-gray-500/10 text-sm"
|
|
>
|
|
View Profile
|
|
<ArrowRight className="h-3 w-3 ml-1" />
|
|
</Button>
|
|
)}
|
|
<Button
|
|
variant="outline"
|
|
className="border-gray-500/20 text-gray-300 hover:bg-gray-500/10 text-sm"
|
|
>
|
|
<MessageCircle className="h-3 w-3 mr-1" />
|
|
Message
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default MentorshipWidget;
|