NEXUS Audio: Services for Hire - Browse artist commissions
cgen-d093473eb94c4c2cba9e631715fa9efd
This commit is contained in:
Builder.io
parent
9cef0fb0a6
commit
d597ed19db
1 changed files with 312 additions and 0 deletions
312
client/components/nexus/AudioServicesForHire.tsx
Normal file
312
client/components/nexus/AudioServicesForHire.tsx
Normal file
|
|
@ -0,0 +1,312 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Search, Star, Clock, DollarSign, CheckCircle, Music } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
interface ArtistService {
|
||||
id: string;
|
||||
user_id: string;
|
||||
full_name: string;
|
||||
avatar_url?: string;
|
||||
bio?: string;
|
||||
skills: string[];
|
||||
verified: boolean;
|
||||
rating: number;
|
||||
for_hire: boolean;
|
||||
price_list: {
|
||||
track_custom?: number;
|
||||
sfx_pack?: number;
|
||||
full_score?: number;
|
||||
day_rate?: number;
|
||||
contact_for_quote?: boolean;
|
||||
};
|
||||
turnaround_days?: number;
|
||||
}
|
||||
|
||||
const SERVICE_TYPES = [
|
||||
{ value: "track_custom", label: "Custom Track" },
|
||||
{ value: "sfx_pack", label: "SFX Pack" },
|
||||
{ value: "full_score", label: "Full Game Score" },
|
||||
{ value: "day_rate", label: "Day Rate Consulting" },
|
||||
];
|
||||
|
||||
export default function AudioServicesForHire() {
|
||||
const navigate = useNavigate();
|
||||
const [artists, setArtists] = useState<ArtistService[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [selectedSkill, setSelectedSkill] = useState<string | null>(null);
|
||||
const [selectedService, setSelectedService] = useState<string | null>(null);
|
||||
const [minRating, setMinRating] = useState<number>(0);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchArtists = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
// Fetch artists who are for_hire
|
||||
const response = await fetch(`/api/ethos/artists?for_hire=true&limit=20`);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setArtists(Array.isArray(data) ? data : []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch artists:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const timer = setTimeout(fetchArtists, 300);
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
// Filter and sort artists
|
||||
const filteredArtists = artists.filter((artist) => {
|
||||
const matchesSearch =
|
||||
!searchQuery ||
|
||||
artist.full_name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
artist.bio?.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
|
||||
const matchesSkill =
|
||||
!selectedSkill ||
|
||||
artist.skills.some((skill) =>
|
||||
skill.toLowerCase().includes(selectedSkill.toLowerCase())
|
||||
);
|
||||
|
||||
const matchesService =
|
||||
!selectedService ||
|
||||
(artist.price_list as Record<string, any>)[selectedService] !== null;
|
||||
|
||||
const matchesRating = artist.rating >= minRating;
|
||||
|
||||
return matchesSearch && matchesSkill && matchesService && matchesRating;
|
||||
});
|
||||
|
||||
// Get all unique skills from artists
|
||||
const allSkills = Array.from(
|
||||
new Set(artists.flatMap((artist) => artist.skills))
|
||||
).sort();
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Search & Filters */}
|
||||
<div className="space-y-4">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-3 h-4 w-4 text-slate-500" />
|
||||
<Input
|
||||
placeholder="Search by artist name or specialty..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-10 bg-slate-800 border-slate-700"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3">
|
||||
<Select value={selectedSkill || ""} onValueChange={(val) => setSelectedSkill(val || null)}>
|
||||
<SelectTrigger className="bg-slate-800 border-slate-700">
|
||||
<SelectValue placeholder="Skill" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="">All Skills</SelectItem>
|
||||
{allSkills.map((skill) => (
|
||||
<SelectItem key={skill} value={skill}>
|
||||
{skill}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select value={selectedService || ""} onValueChange={(val) => setSelectedService(val || null)}>
|
||||
<SelectTrigger className="bg-slate-800 border-slate-700">
|
||||
<SelectValue placeholder="Service" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="">All Services</SelectItem>
|
||||
{SERVICE_TYPES.map((service) => (
|
||||
<SelectItem key={service.value} value={service.value}>
|
||||
{service.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select value={minRating.toString()} onValueChange={(val) => setMinRating(Number(val))}>
|
||||
<SelectTrigger className="bg-slate-800 border-slate-700">
|
||||
<SelectValue placeholder="Min Rating" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="0">All Ratings</SelectItem>
|
||||
<SelectItem value="4">4+ Stars</SelectItem>
|
||||
<SelectItem value="4.5">4.5+ Stars</SelectItem>
|
||||
<SelectItem value="5">5 Stars</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setSearchQuery("");
|
||||
setSelectedSkill(null);
|
||||
setSelectedService(null);
|
||||
setMinRating(0);
|
||||
}}
|
||||
className="border-slate-700"
|
||||
>
|
||||
Clear Filters
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Results Count */}
|
||||
<div className="text-sm text-slate-400">
|
||||
{loading ? "Loading..." : `${filteredArtists.length} artist${filteredArtists.length !== 1 ? "s" : ""} available`}
|
||||
</div>
|
||||
|
||||
{/* Artists Grid */}
|
||||
{loading ? (
|
||||
<div className="text-center py-12 text-slate-400">Loading artists...</div>
|
||||
) : filteredArtists.length === 0 ? (
|
||||
<div className="text-center py-12 text-slate-400">
|
||||
No artists found matching your criteria. Try adjusting your filters.
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{filteredArtists.map((artist) => (
|
||||
<Card
|
||||
key={artist.user_id}
|
||||
className="bg-slate-800/50 border-slate-700 hover:border-slate-600 transition-colors"
|
||||
>
|
||||
<CardHeader>
|
||||
<div className="flex items-start gap-3 mb-2">
|
||||
{artist.avatar_url && (
|
||||
<img
|
||||
src={artist.avatar_url}
|
||||
alt={artist.full_name}
|
||||
className="w-12 h-12 rounded-full"
|
||||
/>
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<CardTitle className="text-white text-lg flex items-center gap-2">
|
||||
{artist.full_name}
|
||||
{artist.verified && (
|
||||
<CheckCircle className="h-4 w-4 text-green-500" />
|
||||
)}
|
||||
</CardTitle>
|
||||
<div className="flex items-center gap-1 mt-1">
|
||||
<Star className="h-4 w-4 text-yellow-500" />
|
||||
<span className="text-sm text-slate-300">{artist.rating.toFixed(1)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Bio */}
|
||||
{artist.bio && (
|
||||
<p className="text-sm text-slate-300 line-clamp-2">{artist.bio}</p>
|
||||
)}
|
||||
|
||||
{/* Skills */}
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-medium text-slate-400">Skills</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{artist.skills.slice(0, 3).map((skill) => (
|
||||
<Badge key={skill} variant="secondary" className="text-xs">
|
||||
{skill}
|
||||
</Badge>
|
||||
))}
|
||||
{artist.skills.length > 3 && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
+{artist.skills.length - 3}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Service Pricing */}
|
||||
<div className="space-y-2 bg-slate-900/50 rounded p-3">
|
||||
<p className="text-xs font-medium text-slate-400">Services</p>
|
||||
<div className="space-y-1">
|
||||
{artist.price_list.track_custom && (
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-slate-300">Custom Track</span>
|
||||
<span className="font-semibold text-pink-400">
|
||||
${artist.price_list.track_custom}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{artist.price_list.sfx_pack && (
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-slate-300">SFX Pack</span>
|
||||
<span className="font-semibold text-pink-400">
|
||||
${artist.price_list.sfx_pack}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{artist.price_list.full_score && (
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-slate-300">Full Score</span>
|
||||
<span className="font-semibold text-pink-400">
|
||||
${artist.price_list.full_score}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{artist.price_list.day_rate && (
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-slate-300">Day Rate</span>
|
||||
<span className="font-semibold text-pink-400">
|
||||
${artist.price_list.day_rate}/day
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{artist.price_list.contact_for_quote && (
|
||||
<div className="text-sm text-yellow-400">
|
||||
Enterprise rates available - contact for quote
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Turnaround */}
|
||||
{artist.turnaround_days && (
|
||||
<div className="flex items-center gap-2 text-sm text-slate-300">
|
||||
<Clock className="h-4 w-4" />
|
||||
<span>{artist.turnaround_days} day turnaround</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<div className="flex gap-2 pt-2">
|
||||
<Button
|
||||
className="flex-1 bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-700 hover:to-purple-700"
|
||||
size="sm"
|
||||
onClick={() => navigate(`/creators/${artist.user_id}`)}
|
||||
>
|
||||
View Profile
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex-1 border-slate-700"
|
||||
onClick={() => navigate(`/ethos/settings`)}
|
||||
>
|
||||
Request Service
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue