CreatorProfile page - view individual creator's profile
cgen-44d16224e7e047cf8d1954b27ce93904
This commit is contained in:
Builder.io
parent
8c0e463419
commit
b322efa514
1 changed files with 244 additions and 0 deletions
244
client/pages/creators/CreatorProfile.tsx
Normal file
244
client/pages/creators/CreatorProfile.tsx
Normal file
|
|
@ -0,0 +1,244 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import Layout from "@/components/Layout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Loader2, ArrowLeft, ExternalLink, MessageSquare } from "lucide-react";
|
||||
import { getCreatorByUsername } from "@/api/creators";
|
||||
import { ArmBadge } from "@/components/creator-network/ArmBadge";
|
||||
import type { Creator } from "@/api/creators";
|
||||
|
||||
export default function CreatorProfile() {
|
||||
const { username } = useParams<{ username: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [creator, setCreator] = useState<Creator | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchCreator = async () => {
|
||||
if (!username) return;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const data = await getCreatorByUsername(username);
|
||||
setCreator(data);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch creator:", error);
|
||||
setCreator(null);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchCreator();
|
||||
}, [username]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Layout>
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-purple-400" />
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
if (!creator) {
|
||||
return (
|
||||
<Layout>
|
||||
<div className="min-h-screen bg-black text-white flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h1 className="text-3xl font-bold mb-4">Creator Not Found</h1>
|
||||
<p className="text-gray-400 mb-6">The creator you're looking for doesn't exist.</p>
|
||||
<Button onClick={() => navigate("/creators")}>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Back to Creators
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
{/* Background */}
|
||||
<div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#8b5cf6_0,rgba(0,0,0,0.45)_55%,rgba(0,0,0,0.9)_100%)]" />
|
||||
<div className="pointer-events-none absolute inset-0 bg-[linear-gradient(transparent_0,transparent_calc(100%-1px),rgba(139,92,246,0.05)_calc(100%-1px))] bg-[length:100%_32px]" />
|
||||
|
||||
<main className="relative z-10">
|
||||
<div className="container mx-auto max-w-4xl px-4 py-12">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<Button
|
||||
onClick={() => navigate("/creators")}
|
||||
variant="ghost"
|
||||
className="mb-4"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Back to Creators
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Profile Card */}
|
||||
<Card className="bg-slate-800/50 border-slate-700 mb-8">
|
||||
<CardContent className="p-8">
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center gap-6 mb-6">
|
||||
<Avatar className="h-24 w-24">
|
||||
<AvatarImage src={creator.avatar_url} alt={creator.username} />
|
||||
<AvatarFallback>
|
||||
{creator.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h1 className="text-3xl font-bold">@{creator.username}</h1>
|
||||
{creator.devconnect_linked && (
|
||||
<Badge className="bg-cyan-500/10 text-cyan-300 border-cyan-500/20">
|
||||
<ExternalLink className="h-3 w-3 mr-1" />
|
||||
On DevConnect
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-gray-300 text-lg mb-4">{creator.bio}</p>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
{creator.primary_arm && (
|
||||
<ArmBadge arm={creator.primary_arm} />
|
||||
)}
|
||||
{creator.arm_affiliations &&
|
||||
creator.arm_affiliations
|
||||
.filter((arm) => arm !== creator.primary_arm)
|
||||
.map((arm) => (
|
||||
<ArmBadge key={arm} arm={arm} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
{creator.devconnect_link && (
|
||||
<Button asChild>
|
||||
<a
|
||||
href={creator.devconnect_link.devconnect_profile_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<ExternalLink className="h-4 w-4 mr-2" />
|
||||
View on DevConnect
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="outline">
|
||||
<MessageSquare className="h-4 w-4 mr-2" />
|
||||
Message
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Skills Section */}
|
||||
{creator.skills && creator.skills.length > 0 && (
|
||||
<Card className="bg-slate-800/50 border-slate-700 mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle>Skills & Expertise</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{creator.skills.map((skill) => (
|
||||
<Badge
|
||||
key={skill}
|
||||
className="bg-slate-700/50 text-gray-300 border-0 px-3 py-1.5 text-sm"
|
||||
>
|
||||
{skill}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Projects Section */}
|
||||
{creator.aethex_projects && creator.aethex_projects.length > 0 && (
|
||||
<Card className="bg-slate-800/50 border-slate-700 mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle>Portfolio Projects</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{creator.aethex_projects.map((project) => (
|
||||
<Card
|
||||
key={project.id}
|
||||
className="bg-slate-700/30 border-slate-600"
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
{project.image_url && (
|
||||
<img
|
||||
src={project.image_url}
|
||||
alt={project.title}
|
||||
className="w-full h-40 object-cover rounded-lg mb-3"
|
||||
/>
|
||||
)}
|
||||
<h3 className="font-bold text-white mb-1">
|
||||
{project.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-400 mb-3">
|
||||
{project.description}
|
||||
</p>
|
||||
{project.url && (
|
||||
<Button
|
||||
asChild
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full"
|
||||
>
|
||||
<a
|
||||
href={project.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
View Project
|
||||
<ExternalLink className="h-3 w-3 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
{project.tags && project.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 mt-3">
|
||||
{project.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="text-xs bg-slate-600/50 text-gray-300 px-2 py-1 rounded"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Experience Level */}
|
||||
<Card className="bg-slate-800/50 border-slate-700">
|
||||
<CardHeader>
|
||||
<CardTitle>Experience Level</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Badge className="bg-slate-700/50 text-gray-300 border-0 px-3 py-1.5 text-sm">
|
||||
{creator.experience_level || "Not specified"}
|
||||
</Badge>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue