CreatorDirectory page - browse creators with arm filtering
cgen-20c280821a2d4d1b906b054ea5a20517
This commit is contained in:
Builder.io
parent
fd91af2766
commit
257d1bdaee
1 changed files with 201 additions and 0 deletions
201
client/pages/creators/CreatorDirectory.tsx
Normal file
201
client/pages/creators/CreatorDirectory.tsx
Normal file
|
|
@ -0,0 +1,201 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import Layout from "@/components/Layout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Loader2, Search, Users } from "lucide-react";
|
||||
import { getCreators } from "@/api/creators";
|
||||
import { CreatorCard } from "@/components/creator-network/CreatorCard";
|
||||
import { ArmFilter } from "@/components/creator-network/ArmFilter";
|
||||
import type { Creator } from "@/api/creators";
|
||||
|
||||
export default function CreatorDirectory() {
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [creators, setCreators] = useState<Creator[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [search, setSearch] = useState(searchParams.get("search") || "");
|
||||
const [selectedArm, setSelectedArm] = useState<string | undefined>(
|
||||
searchParams.get("arm") || undefined
|
||||
);
|
||||
const [page, setPage] = useState(parseInt(searchParams.get("page") || "1"));
|
||||
const [totalPages, setTotalPages] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchCreators = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const result = await getCreators({
|
||||
arm: selectedArm,
|
||||
search: search || undefined,
|
||||
page,
|
||||
limit: 12,
|
||||
});
|
||||
setCreators(result.data);
|
||||
setTotalPages(result.pagination.pages);
|
||||
|
||||
// Update URL params
|
||||
const params = new URLSearchParams();
|
||||
if (selectedArm) params.set("arm", selectedArm);
|
||||
if (search) params.set("search", search);
|
||||
if (page > 1) params.set("page", String(page));
|
||||
setSearchParams(params);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch creators:", error);
|
||||
setCreators([]);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchCreators();
|
||||
}, [selectedArm, search, page, setSearchParams]);
|
||||
|
||||
const handleSearch = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
const handleArmChange = (arm: string | undefined) => {
|
||||
setSelectedArm(arm);
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
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]" />
|
||||
<div className="pointer-events-none absolute inset-0 opacity-[0.08] [background-image:linear-gradient(90deg,rgba(139,92,246,0.1)_1px,transparent_1px),linear-gradient(0deg,rgba(139,92,246,0.1)_1px,transparent_1px)] [background-size:50px_50px] animate-pulse" />
|
||||
<div className="pointer-events-none absolute top-20 left-10 w-72 h-72 bg-purple-500/20 rounded-full blur-3xl animate-blob" />
|
||||
<div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-purple-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
|
||||
|
||||
<main className="relative z-10">
|
||||
{/* Hero Section */}
|
||||
<section className="py-12 lg:py-20 border-b border-slate-800">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="text-center mb-8">
|
||||
<div className="inline-flex items-center justify-center gap-2 mb-4">
|
||||
<Users className="h-8 w-8 text-purple-400" />
|
||||
<h1 className="text-4xl lg:text-5xl font-black text-white">
|
||||
Creator Directory
|
||||
</h1>
|
||||
</div>
|
||||
<p className="text-lg text-gray-300 max-w-2xl mx-auto">
|
||||
Discover talented creators across all AeThex arms. Filter by specialty, skills, and arm affiliation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Search Bar */}
|
||||
<form onSubmit={handleSearch} className="max-w-2xl mx-auto">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
|
||||
<Input
|
||||
placeholder="Search creators by name or skills..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="pl-10 h-12 bg-slate-800/50 border-slate-700 text-white placeholder:text-gray-400"
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2"
|
||||
>
|
||||
Search
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Main Content */}
|
||||
<section className="py-12 lg:py-20">
|
||||
<div className="container mx-auto max-w-7xl px-4">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||||
{/* Filters Sidebar */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="sticky top-24 space-y-4">
|
||||
<ArmFilter
|
||||
selectedArm={selectedArm}
|
||||
onArmChange={handleArmChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Creators Grid */}
|
||||
<div className="lg:col-span-3">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-purple-400" />
|
||||
</div>
|
||||
) : creators.length === 0 ? (
|
||||
<div className="text-center py-20">
|
||||
<Users className="h-12 w-12 text-gray-600 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-semibold text-gray-300 mb-2">
|
||||
No creators found
|
||||
</h3>
|
||||
<p className="text-gray-500 mb-6">
|
||||
Try adjusting your filters or search terms
|
||||
</p>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setSearch("");
|
||||
setSelectedArm(undefined);
|
||||
setPage(1);
|
||||
}}
|
||||
variant="outline"
|
||||
>
|
||||
Clear Filters
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
||||
{creators.map((creator) => (
|
||||
<CreatorCard key={creator.id} creator={creator} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-center gap-2 mt-8">
|
||||
<Button
|
||||
onClick={() => setPage(Math.max(1, page - 1))}
|
||||
disabled={page === 1}
|
||||
variant="outline"
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
<div className="flex items-center gap-1">
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1).map(
|
||||
(p) => (
|
||||
<Button
|
||||
key={p}
|
||||
onClick={() => setPage(p)}
|
||||
variant={page === p ? "default" : "outline"}
|
||||
size="sm"
|
||||
>
|
||||
{p}
|
||||
</Button>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => setPage(Math.min(totalPages, page + 1))}
|
||||
disabled={page === totalPages}
|
||||
variant="outline"
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue