Update user profile settings and creator directory features
Refactors API base URL handling, modifies toast notification parameters from `message` to `description`, and introduces new UI components and logic for managing realm preferences in the Dashboard and creating creator profiles in the Creator Directory. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 9203795e-937a-4306-b81d-b4d5c78c240e Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Event-Id: d2c019e3-5d76-487b-9be0-1ca441f25a69 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7c94b7a0-29c7-4f2e-94ef-44b2153872b7/9203795e-937a-4306-b81d-b4d5c78c240e/cjJvaG9 Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sirpiglr
parent
18b6c336d2
commit
aa47015dbd
4 changed files with 426 additions and 68 deletions
2
.replit
2
.replit
|
|
@ -61,7 +61,7 @@ localPort = 40437
|
|||
externalPort = 3001
|
||||
|
||||
[[ports]]
|
||||
localPort = 44257
|
||||
localPort = 43879
|
||||
externalPort = 3002
|
||||
|
||||
[deployment]
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ export interface CreatorsResponse {
|
|||
};
|
||||
}
|
||||
|
||||
const getApiBase = () =>
|
||||
const API_BASE =
|
||||
typeof window !== "undefined" ? window.location.origin : "";
|
||||
|
||||
export async function getCreators(filters?: {
|
||||
|
|
@ -169,9 +169,7 @@ export async function endorseSkill(
|
|||
creatorId: string,
|
||||
skill: string,
|
||||
): Promise<void> {
|
||||
const apiBase = getApiBase();
|
||||
if (!apiBase) throw new Error("No API base available");
|
||||
const response = await fetch(`${apiBase}/api/creators/${creatorId}/endorse`, {
|
||||
const response = await fetch(`${API_BASE}/api/creators/${creatorId}/endorse`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ skill }),
|
||||
|
|
|
|||
|
|
@ -180,6 +180,10 @@ export default function Dashboard() {
|
|||
const [twitter, setTwitter] = useState("");
|
||||
const [savingProfile, setSavingProfile] = useState(false);
|
||||
const [profileLinkCopied, setProfileLinkCopied] = useState(false);
|
||||
const [selectedRealm, setSelectedRealm] = useState<RealmKey | null>(null);
|
||||
const [selectedExperience, setSelectedExperience] = useState("intermediate");
|
||||
const [realmHasChanges, setRealmHasChanges] = useState(false);
|
||||
const [savingRealm, setSavingRealm] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (profile) {
|
||||
|
|
@ -189,9 +193,47 @@ export default function Dashboard() {
|
|||
setLinkedin(profile.linkedin_url || "");
|
||||
setGithub(profile.github_url || "");
|
||||
setTwitter(profile.twitter_url || "");
|
||||
setSelectedRealm((profile as any).primary_realm || null);
|
||||
setSelectedExperience((profile as any).experience_level || "intermediate");
|
||||
}
|
||||
}, [profile]);
|
||||
|
||||
const handleRealmChange = (realm: RealmKey) => {
|
||||
setSelectedRealm(realm);
|
||||
setRealmHasChanges(true);
|
||||
};
|
||||
|
||||
const handleExperienceChange = (value: string) => {
|
||||
setSelectedExperience(value);
|
||||
setRealmHasChanges(true);
|
||||
};
|
||||
|
||||
const handleSaveRealm = async () => {
|
||||
if (!user || !selectedRealm) return;
|
||||
setSavingRealm(true);
|
||||
try {
|
||||
const { error } = await (window as any).supabaseClient
|
||||
.from("user_profiles")
|
||||
.update({
|
||||
primary_realm: selectedRealm,
|
||||
experience_level: selectedExperience,
|
||||
})
|
||||
.eq("id", user.id);
|
||||
|
||||
if (error) throw error;
|
||||
aethexToast.success({
|
||||
description: "Realm preference saved!",
|
||||
});
|
||||
setRealmHasChanges(false);
|
||||
} catch (error: any) {
|
||||
aethexToast.error({
|
||||
description: error?.message || "Failed to save realm preference",
|
||||
});
|
||||
} finally {
|
||||
setSavingRealm(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveProfile = async () => {
|
||||
if (!user) return;
|
||||
setSavingProfile(true);
|
||||
|
|
@ -209,14 +251,12 @@ export default function Dashboard() {
|
|||
.eq("id", user.id);
|
||||
|
||||
if (error) throw error;
|
||||
aethexToast({
|
||||
message: "Profile updated successfully!",
|
||||
type: "success",
|
||||
aethexToast.success({
|
||||
description: "Profile updated successfully!",
|
||||
});
|
||||
} catch (error: any) {
|
||||
aethexToast({
|
||||
message: error?.message || "Failed to update profile",
|
||||
type: "error",
|
||||
aethexToast.error({
|
||||
description: error?.message || "Failed to update profile",
|
||||
});
|
||||
} finally {
|
||||
setSavingProfile(false);
|
||||
|
|
@ -607,35 +647,111 @@ export default function Dashboard() {
|
|||
|
||||
{/* Settings Tab */}
|
||||
<TabsContent value="settings" className="space-y-6 animate-fade-in">
|
||||
{/* Realm Preference - Full Width */}
|
||||
<Card className="bg-gradient-to-br from-purple-950/40 to-purple-900/20 border-purple-500/20">
|
||||
<CardHeader>
|
||||
<CardTitle>Realm & Experience</CardTitle>
|
||||
<CardDescription>
|
||||
Choose your primary area of focus and experience level
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<RealmSwitcher
|
||||
selectedRealm={selectedRealm}
|
||||
onRealmChange={handleRealmChange}
|
||||
selectedExperience={selectedExperience}
|
||||
onExperienceChange={handleExperienceChange}
|
||||
hasChanges={realmHasChanges}
|
||||
onSave={handleSaveRealm}
|
||||
saving={savingRealm}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Realm Preference */}
|
||||
{/* Notifications */}
|
||||
<Card className="bg-gradient-to-br from-purple-950/40 to-purple-900/20 border-purple-500/20">
|
||||
<CardHeader>
|
||||
<CardTitle>Primary Realm</CardTitle>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Bell className="h-5 w-5" />
|
||||
Notifications
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Choose your primary area of focus
|
||||
Manage your notification preferences
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<RealmSwitcher />
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between py-2 border-b border-purple-500/10">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white">Email Notifications</p>
|
||||
<p className="text-xs text-gray-400">Receive updates via email</p>
|
||||
</div>
|
||||
<Badge variant="outline" className="text-purple-300 border-purple-500/30">Coming Soon</Badge>
|
||||
</div>
|
||||
<div className="flex items-center justify-between py-2 border-b border-purple-500/10">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white">Community Updates</p>
|
||||
<p className="text-xs text-gray-400">New posts and mentions</p>
|
||||
</div>
|
||||
<Badge variant="outline" className="text-purple-300 border-purple-500/30">Coming Soon</Badge>
|
||||
</div>
|
||||
<div className="flex items-center justify-between py-2">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white">Project Alerts</p>
|
||||
<p className="text-xs text-gray-400">Updates on your projects</p>
|
||||
</div>
|
||||
<Badge variant="outline" className="text-purple-300 border-purple-500/30">Coming Soon</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Account Actions */}
|
||||
<Card className="bg-gradient-to-br from-red-950/40 to-red-900/20 border-red-500/20">
|
||||
<CardHeader>
|
||||
<CardTitle>Account Actions</CardTitle>
|
||||
<CardDescription>Manage your account</CardDescription>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Settings className="h-5 w-5" />
|
||||
Account Actions
|
||||
</CardTitle>
|
||||
<CardDescription>Manage your account settings</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-start gap-2 border-red-500/30 text-red-300 hover:bg-red-500/10 h-auto py-2"
|
||||
onClick={() => signOut()}
|
||||
className="w-full justify-start gap-2 border-purple-500/30 text-purple-300 hover:bg-purple-500/10 h-auto py-3"
|
||||
onClick={() => navigate("/creators")}
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
Sign Out
|
||||
<Users className="h-4 w-4" />
|
||||
<div className="text-left">
|
||||
<p className="font-medium">Creator Profile</p>
|
||||
<p className="text-xs text-gray-400">Join the creator network</p>
|
||||
</div>
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-start gap-2 border-purple-500/30 text-purple-300 hover:bg-purple-500/10 h-auto py-3"
|
||||
asChild
|
||||
>
|
||||
<Link to="/community">
|
||||
<Activity className="h-4 w-4" />
|
||||
<div className="text-left">
|
||||
<p className="font-medium">Community</p>
|
||||
<p className="text-xs text-gray-400">Join discussions and connect</p>
|
||||
</div>
|
||||
</Link>
|
||||
</Button>
|
||||
<div className="pt-3 border-t border-red-500/20">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-start gap-2 border-red-500/30 text-red-300 hover:bg-red-500/10 h-auto py-3"
|
||||
onClick={() => signOut()}
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
<div className="text-left">
|
||||
<p className="font-medium">Sign Out</p>
|
||||
<p className="text-xs text-red-400/70">Log out of your account</p>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,51 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import { useSearchParams, Link } 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 { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Loader2, Search, Users, Plus, Sparkles } from "lucide-react";
|
||||
import { getCreators, createCreatorProfile } from "@/api/creators";
|
||||
import { CreatorCard } from "@/components/creator-network/CreatorCard";
|
||||
import { ArmFilter } from "@/components/creator-network/ArmFilter";
|
||||
import { useAuth } from "@/contexts/AuthContext";
|
||||
import { aethexToast } from "@/lib/aethex-toast";
|
||||
import type { Creator } from "@/api/creators";
|
||||
|
||||
const ARMS = [
|
||||
{ value: "labs", label: "Labs - Research & Development" },
|
||||
{ value: "gameforge", label: "GameForge - Game Development" },
|
||||
{ value: "corp", label: "Corp - Business & Consulting" },
|
||||
{ value: "foundation", label: "Foundation - Education" },
|
||||
{ value: "devlink", label: "Dev-Link - Developer Network" },
|
||||
{ value: "nexus", label: "Nexus - Talent Marketplace" },
|
||||
];
|
||||
|
||||
const EXPERIENCE_LEVELS = [
|
||||
{ value: "beginner", label: "Beginner (0-1 years)" },
|
||||
{ value: "intermediate", label: "Intermediate (1-3 years)" },
|
||||
{ value: "advanced", label: "Advanced (3-5 years)" },
|
||||
{ value: "expert", label: "Expert (5+ years)" },
|
||||
];
|
||||
|
||||
export default function CreatorDirectory() {
|
||||
const { user, profile } = useAuth();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [creators, setCreators] = useState<Creator[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
|
@ -20,33 +56,52 @@ export default function CreatorDirectory() {
|
|||
const [page, setPage] = useState(parseInt(searchParams.get("page") || "1"));
|
||||
const [totalPages, setTotalPages] = useState(0);
|
||||
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
username: "",
|
||||
bio: "",
|
||||
skills: "",
|
||||
primary_arm: "",
|
||||
experience_level: "",
|
||||
});
|
||||
|
||||
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);
|
||||
if (profile) {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
username: profile.username || "",
|
||||
bio: profile.bio || "",
|
||||
}));
|
||||
}
|
||||
}, [profile]);
|
||||
|
||||
// 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);
|
||||
}
|
||||
};
|
||||
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);
|
||||
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchCreators();
|
||||
}, [selectedArm, search, page, setSearchParams]);
|
||||
|
||||
|
|
@ -60,10 +115,47 @@ export default function CreatorDirectory() {
|
|||
setPage(1);
|
||||
};
|
||||
|
||||
const handleSubmitCreator = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!user) {
|
||||
aethexToast.error({ description: "Please sign in to register as a creator" });
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.username || !formData.bio || !formData.primary_arm) {
|
||||
aethexToast.error({ description: "Please fill in all required fields" });
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
await createCreatorProfile({
|
||||
username: formData.username,
|
||||
bio: formData.bio,
|
||||
skills: formData.skills
|
||||
.split(",")
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean),
|
||||
avatar_url: profile?.avatar_url || "",
|
||||
experience_level: formData.experience_level || "beginner",
|
||||
primary_arm: formData.primary_arm,
|
||||
arm_affiliations: [formData.primary_arm],
|
||||
});
|
||||
|
||||
aethexToast.success({ description: "You're now a creator! Welcome to the network." });
|
||||
setIsDialogOpen(false);
|
||||
fetchCreators();
|
||||
} catch (error: any) {
|
||||
console.error("Failed to create creator profile:", error);
|
||||
aethexToast.error({ description: error?.message || "Failed to create creator profile" });
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
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" />
|
||||
|
|
@ -71,7 +163,6 @@ export default function CreatorDirectory() {
|
|||
<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">
|
||||
|
|
@ -81,13 +172,165 @@ export default function CreatorDirectory() {
|
|||
Creator Directory
|
||||
</h1>
|
||||
</div>
|
||||
<p className="text-lg text-gray-300 max-w-2xl mx-auto">
|
||||
<p className="text-lg text-gray-300 max-w-2xl mx-auto mb-6">
|
||||
Discover talented creators across all AeThex arms. Filter by
|
||||
specialty, skills, and arm affiliation.
|
||||
</p>
|
||||
|
||||
{user ? (
|
||||
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button className="bg-purple-600 hover:bg-purple-700">
|
||||
<Sparkles className="h-4 w-4 mr-2" />
|
||||
Become a Creator
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="bg-slate-900 border-slate-700 text-white max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-xl">
|
||||
Join the Creator Network
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-gray-400">
|
||||
Register as a creator to showcase your work and
|
||||
connect with other builders.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form
|
||||
onSubmit={handleSubmitCreator}
|
||||
className="space-y-4 mt-4"
|
||||
>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="username">Username *</Label>
|
||||
<Input
|
||||
id="username"
|
||||
value={formData.username}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
username: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="Your unique username"
|
||||
className="bg-slate-800 border-slate-600"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="bio">Bio *</Label>
|
||||
<Textarea
|
||||
id="bio"
|
||||
value={formData.bio}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, bio: e.target.value })
|
||||
}
|
||||
placeholder="Tell us about yourself and what you create..."
|
||||
className="bg-slate-800 border-slate-600 min-h-[100px]"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="skills">
|
||||
Skills (comma-separated)
|
||||
</Label>
|
||||
<Input
|
||||
id="skills"
|
||||
value={formData.skills}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
skills: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="React, TypeScript, Game Design..."
|
||||
className="bg-slate-800 border-slate-600"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="primary_arm">Primary Arm *</Label>
|
||||
<Select
|
||||
value={formData.primary_arm}
|
||||
onValueChange={(value) =>
|
||||
setFormData({ ...formData, primary_arm: value })
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="bg-slate-800 border-slate-600">
|
||||
<SelectValue placeholder="Select your primary arm" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="bg-slate-800 border-slate-600">
|
||||
{ARMS.map((arm) => (
|
||||
<SelectItem key={arm.value} value={arm.value}>
|
||||
{arm.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="experience">Experience Level</Label>
|
||||
<Select
|
||||
value={formData.experience_level}
|
||||
onValueChange={(value) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
experience_level: value,
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="bg-slate-800 border-slate-600">
|
||||
<SelectValue placeholder="Select experience level" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="bg-slate-800 border-slate-600">
|
||||
{EXPERIENCE_LEVELS.map((level) => (
|
||||
<SelectItem
|
||||
key={level.value}
|
||||
value={level.value}
|
||||
>
|
||||
{level.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex gap-3 pt-4">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setIsDialogOpen(false)}
|
||||
className="flex-1"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="flex-1 bg-purple-600 hover:bg-purple-700"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
Creating...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Join Network
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
) : (
|
||||
<Link to="/auth">
|
||||
<Button className="bg-purple-600 hover:bg-purple-700">
|
||||
<Sparkles className="h-4 w-4 mr-2" />
|
||||
Sign in to Become a Creator
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</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" />
|
||||
|
|
@ -108,11 +351,9 @@ export default function CreatorDirectory() {
|
|||
</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
|
||||
|
|
@ -122,7 +363,6 @@ export default function CreatorDirectory() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Creators Grid */}
|
||||
<div className="lg:col-span-3">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-20">
|
||||
|
|
@ -135,18 +375,23 @@ export default function CreatorDirectory() {
|
|||
No creators found
|
||||
</h3>
|
||||
<p className="text-gray-500 mb-6">
|
||||
Try adjusting your filters or search terms
|
||||
Be the first to join the creator network!
|
||||
</p>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setSearch("");
|
||||
setSelectedArm(undefined);
|
||||
setPage(1);
|
||||
}}
|
||||
variant="outline"
|
||||
>
|
||||
Clear Filters
|
||||
</Button>
|
||||
{user ? (
|
||||
<Button
|
||||
onClick={() => setIsDialogOpen(true)}
|
||||
className="bg-purple-600 hover:bg-purple-700"
|
||||
>
|
||||
<Sparkles className="h-4 w-4 mr-2" />
|
||||
Become a Creator
|
||||
</Button>
|
||||
) : (
|
||||
<Link to="/auth">
|
||||
<Button className="bg-purple-600 hover:bg-purple-700">
|
||||
Sign in to Join
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
|
|
@ -156,7 +401,6 @@ export default function CreatorDirectory() {
|
|||
))}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-center gap-2 mt-8">
|
||||
<Button
|
||||
|
|
|
|||
Loading…
Reference in a new issue