mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-26 08:51:09 -05:00
Add contributor leaderboard
Add types, hook, UI components, and integration for leaderboard showing top users with badges
This commit is contained in:
gpt-engineer-app[bot]
173
src/components/contributors/AchievementBadge.tsx
Normal file
173
src/components/contributors/AchievementBadge.tsx
Normal file
@@ -0,0 +1,173 @@
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
|
||||
import {
|
||||
Award,
|
||||
Camera,
|
||||
Edit,
|
||||
MapPin,
|
||||
MessageSquare,
|
||||
Sparkles,
|
||||
Trophy,
|
||||
Crown,
|
||||
Shield
|
||||
} from 'lucide-react';
|
||||
import type { AchievementLevel, SpecialBadge } from '@/types/contributor';
|
||||
|
||||
interface AchievementBadgeProps {
|
||||
level: AchievementLevel;
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
}
|
||||
|
||||
interface SpecialBadgeProps {
|
||||
badge: SpecialBadge;
|
||||
size?: 'sm' | 'md';
|
||||
}
|
||||
|
||||
const achievementConfig: Record<AchievementLevel, {
|
||||
label: string;
|
||||
color: string;
|
||||
icon: React.ReactNode;
|
||||
description: string;
|
||||
}> = {
|
||||
legend: {
|
||||
label: 'Legend',
|
||||
color: 'bg-gradient-to-r from-purple-500 to-pink-500 text-white border-0',
|
||||
icon: <Crown className="w-3 h-3" />,
|
||||
description: '5000+ contribution points - An absolute legend!',
|
||||
},
|
||||
platinum: {
|
||||
label: 'Platinum',
|
||||
color: 'bg-gradient-to-r from-slate-300 to-slate-400 text-slate-900 border-0',
|
||||
icon: <Trophy className="w-3 h-3" />,
|
||||
description: '1000+ contribution points - Elite contributor',
|
||||
},
|
||||
gold: {
|
||||
label: 'Gold',
|
||||
color: 'bg-gradient-to-r from-yellow-400 to-yellow-500 text-yellow-900 border-0',
|
||||
icon: <Award className="w-3 h-3" />,
|
||||
description: '500+ contribution points - Outstanding work!',
|
||||
},
|
||||
silver: {
|
||||
label: 'Silver',
|
||||
color: 'bg-gradient-to-r from-gray-300 to-gray-400 text-gray-800 border-0',
|
||||
icon: <Award className="w-3 h-3" />,
|
||||
description: '100+ contribution points - Great contributor',
|
||||
},
|
||||
bronze: {
|
||||
label: 'Bronze',
|
||||
color: 'bg-gradient-to-r from-orange-400 to-orange-500 text-orange-900 border-0',
|
||||
icon: <Award className="w-3 h-3" />,
|
||||
description: '10+ contribution points - Getting started!',
|
||||
},
|
||||
newcomer: {
|
||||
label: 'Newcomer',
|
||||
color: 'bg-muted text-muted-foreground',
|
||||
icon: <Sparkles className="w-3 h-3" />,
|
||||
description: 'Just getting started',
|
||||
},
|
||||
};
|
||||
|
||||
const specialBadgeConfig: Record<SpecialBadge, {
|
||||
label: string;
|
||||
icon: React.ReactNode;
|
||||
description: string;
|
||||
color: string;
|
||||
}> = {
|
||||
park_explorer: {
|
||||
label: 'Park Explorer',
|
||||
icon: <MapPin className="w-3 h-3" />,
|
||||
description: 'Added 100+ parks to the database',
|
||||
color: 'bg-green-500/10 text-green-700 dark:text-green-400 border-green-500/20',
|
||||
},
|
||||
ride_master: {
|
||||
label: 'Ride Master',
|
||||
icon: <Sparkles className="w-3 h-3" />,
|
||||
description: 'Added 200+ rides to the database',
|
||||
color: 'bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-500/20',
|
||||
},
|
||||
photographer: {
|
||||
label: 'Photographer',
|
||||
icon: <Camera className="w-3 h-3" />,
|
||||
description: 'Uploaded 500+ photos',
|
||||
color: 'bg-purple-500/10 text-purple-700 dark:text-purple-400 border-purple-500/20',
|
||||
},
|
||||
critic: {
|
||||
label: 'Critic',
|
||||
icon: <MessageSquare className="w-3 h-3" />,
|
||||
description: 'Wrote 100+ reviews',
|
||||
color: 'bg-orange-500/10 text-orange-700 dark:text-orange-400 border-orange-500/20',
|
||||
},
|
||||
editor: {
|
||||
label: 'Editor',
|
||||
icon: <Edit className="w-3 h-3" />,
|
||||
description: 'Made 500+ edits to existing entries',
|
||||
color: 'bg-cyan-500/10 text-cyan-700 dark:text-cyan-400 border-cyan-500/20',
|
||||
},
|
||||
completionist: {
|
||||
label: 'Completionist',
|
||||
icon: <Shield className="w-3 h-3" />,
|
||||
description: 'Contributed across all content types',
|
||||
color: 'bg-indigo-500/10 text-indigo-700 dark:text-indigo-400 border-indigo-500/20',
|
||||
},
|
||||
veteran: {
|
||||
label: 'Veteran',
|
||||
icon: <Award className="w-3 h-3" />,
|
||||
description: 'Member for over 1 year',
|
||||
color: 'bg-amber-500/10 text-amber-700 dark:text-amber-400 border-amber-500/20',
|
||||
},
|
||||
top_contributor: {
|
||||
label: 'Top Contributor',
|
||||
icon: <Crown className="w-3 h-3" />,
|
||||
description: 'Ranked #1 contributor',
|
||||
color: 'bg-pink-500/10 text-pink-700 dark:text-pink-400 border-pink-500/20',
|
||||
},
|
||||
};
|
||||
|
||||
export function AchievementBadge({ level, size = 'md' }: AchievementBadgeProps) {
|
||||
const config = achievementConfig[level];
|
||||
const sizeClasses = {
|
||||
sm: 'text-xs px-2 py-0.5',
|
||||
md: 'text-sm px-2.5 py-0.5',
|
||||
lg: 'text-base px-3 py-1',
|
||||
};
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Badge className={`${config.color} ${sizeClasses[size]} gap-1`}>
|
||||
{config.icon}
|
||||
{config.label}
|
||||
</Badge>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{config.description}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export function SpecialBadge({ badge, size = 'sm' }: SpecialBadgeProps) {
|
||||
const config = specialBadgeConfig[badge];
|
||||
const sizeClasses = {
|
||||
sm: 'text-xs px-2 py-0.5',
|
||||
md: 'text-sm px-2.5 py-0.5',
|
||||
};
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Badge variant="outline" className={`${config.color} ${sizeClasses[size]} gap-1`}>
|
||||
{config.icon}
|
||||
{config.label}
|
||||
</Badge>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{config.description}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
172
src/components/contributors/ContributorLeaderboard.tsx
Normal file
172
src/components/contributors/ContributorLeaderboard.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
import { useState } from 'react';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { useContributorLeaderboard } from '@/hooks/useContributorLeaderboard';
|
||||
import { LeaderboardEntry } from './LeaderboardEntry';
|
||||
import { TimePeriod } from '@/types/contributor';
|
||||
import { Trophy, TrendingUp, Users, AlertCircle } from 'lucide-react';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
|
||||
export function ContributorLeaderboard() {
|
||||
const [timePeriod, setTimePeriod] = useState<TimePeriod>('all_time');
|
||||
const [limit, setLimit] = useState(50);
|
||||
|
||||
const { data, isLoading, error } = useContributorLeaderboard(limit, timePeriod);
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
Failed to load contributor leaderboard. Please try again later.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="flex items-center gap-2 text-2xl">
|
||||
<Trophy className="w-6 h-6 text-yellow-500" />
|
||||
Contributor Leaderboard
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Celebrating our amazing contributors who make ThrillWiki possible
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Badge variant="secondary" className="text-lg px-4 py-2">
|
||||
<Users className="w-4 h-4 mr-2" />
|
||||
{data?.total_contributors.toLocaleString() || 0} Contributors
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
{/* Time Period Filter */}
|
||||
<div className="flex-1">
|
||||
<label className="text-sm font-medium mb-2 block">Time Period</label>
|
||||
<Select value={timePeriod} onValueChange={(value) => setTimePeriod(value as TimePeriod)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all_time">
|
||||
<div className="flex items-center gap-2">
|
||||
<Trophy className="w-4 h-4" />
|
||||
All Time
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="month">
|
||||
<div className="flex items-center gap-2">
|
||||
<TrendingUp className="w-4 h-4" />
|
||||
This Month
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="week">
|
||||
<div className="flex items-center gap-2">
|
||||
<TrendingUp className="w-4 h-4" />
|
||||
This Week
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Limit Filter */}
|
||||
<div className="flex-1">
|
||||
<label className="text-sm font-medium mb-2 block">Show Top</label>
|
||||
<Select value={limit.toString()} onValueChange={(value) => setLimit(parseInt(value))}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="10">Top 10</SelectItem>
|
||||
<SelectItem value="25">Top 25</SelectItem>
|
||||
<SelectItem value="50">Top 50</SelectItem>
|
||||
<SelectItem value="100">Top 100</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Achievement Legend */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Achievement Levels</CardTitle>
|
||||
<CardDescription>
|
||||
Contribution points are calculated based on approved submissions: Parks (10 pts), Rides (8 pts), Companies (5 pts), Models (5 pts), Reviews (3 pts), Photos (2 pts), Edits (1 pt)
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
|
||||
<AchievementInfo level="Legend" points="5000+" color="bg-gradient-to-r from-purple-500 to-pink-500" />
|
||||
<AchievementInfo level="Platinum" points="1000+" color="bg-gradient-to-r from-slate-300 to-slate-400" />
|
||||
<AchievementInfo level="Gold" points="500+" color="bg-gradient-to-r from-yellow-400 to-yellow-500" />
|
||||
<AchievementInfo level="Silver" points="100+" color="bg-gradient-to-r from-gray-300 to-gray-400" />
|
||||
<AchievementInfo level="Bronze" points="10+" color="bg-gradient-to-r from-orange-400 to-orange-500" />
|
||||
<AchievementInfo level="Newcomer" points="0-9" color="bg-muted" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Leaderboard */}
|
||||
{isLoading ? (
|
||||
<div className="space-y-4">
|
||||
{[...Array(10)].map((_, i) => (
|
||||
<Card key={i} className="p-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<Skeleton className="w-[60px] h-[60px] rounded-lg" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<Skeleton className="h-6 w-1/3" />
|
||||
<Skeleton className="h-4 w-1/4" />
|
||||
<Skeleton className="h-20 w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : data?.contributors && data.contributors.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{data.contributors.map((contributor) => (
|
||||
<LeaderboardEntry
|
||||
key={contributor.user_id}
|
||||
contributor={contributor}
|
||||
showPeriodStats={timePeriod !== 'all_time'}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Card>
|
||||
<CardContent className="py-12 text-center">
|
||||
<Trophy className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
|
||||
<h3 className="text-lg font-semibold mb-2">No Contributors Yet</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Be the first to contribute to ThrillWiki!
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AchievementInfo({ level, points, color }: { level: string; points: string; color: string }) {
|
||||
return (
|
||||
<div className="text-center">
|
||||
<div className={`${color} rounded-lg p-3 mb-2`}>
|
||||
<Trophy className="w-6 h-6 mx-auto" />
|
||||
</div>
|
||||
<div className="text-sm font-semibold">{level}</div>
|
||||
<div className="text-xs text-muted-foreground">{points} pts</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
146
src/components/contributors/LeaderboardEntry.tsx
Normal file
146
src/components/contributors/LeaderboardEntry.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { LeaderboardContributor } from '@/types/contributor';
|
||||
import { AchievementBadge, SpecialBadge } from './AchievementBadge';
|
||||
import { Trophy, TrendingUp, Calendar } from 'lucide-react';
|
||||
import { formatDistanceToNow } from 'date-fns';
|
||||
|
||||
interface LeaderboardEntryProps {
|
||||
contributor: LeaderboardContributor;
|
||||
showPeriodStats?: boolean;
|
||||
}
|
||||
|
||||
export function LeaderboardEntry({ contributor, showPeriodStats = false }: LeaderboardEntryProps) {
|
||||
const periodStats = contributor.stats;
|
||||
const allTimeStats = contributor.total_stats;
|
||||
const totalContributions = showPeriodStats
|
||||
? contributor.contribution_score
|
||||
: contributor.total_score;
|
||||
|
||||
const getRankColor = (rank: number) => {
|
||||
if (rank === 1) return 'text-yellow-500';
|
||||
if (rank === 2) return 'text-gray-400';
|
||||
if (rank === 3) return 'text-orange-600';
|
||||
return 'text-muted-foreground';
|
||||
};
|
||||
|
||||
const getRankIcon = (rank: number) => {
|
||||
if (rank <= 3) {
|
||||
return <Trophy className={`w-6 h-6 ${getRankColor(rank)}`} />;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-4 hover:shadow-lg transition-shadow">
|
||||
<div className="flex items-start gap-4">
|
||||
{/* Rank */}
|
||||
<div className="flex flex-col items-center justify-center min-w-[60px]">
|
||||
{getRankIcon(contributor.rank)}
|
||||
<span className={`text-2xl font-bold ${getRankColor(contributor.rank)}`}>
|
||||
#{contributor.rank}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Avatar & Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start gap-3 mb-3">
|
||||
<Avatar className="w-12 h-12">
|
||||
<AvatarImage src={contributor.avatar_url || undefined} />
|
||||
<AvatarFallback>
|
||||
{(contributor.display_name || contributor.username).slice(0, 2).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className="font-semibold text-lg truncate">
|
||||
{contributor.display_name || contributor.username}
|
||||
</h3>
|
||||
<AchievementBadge level={contributor.achievement_level} />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 text-sm text-muted-foreground mb-2">
|
||||
<Calendar className="w-3 h-3" />
|
||||
<span>
|
||||
Joined {formatDistanceToNow(new Date(contributor.join_date), { addSuffix: true })}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Special Badges */}
|
||||
{contributor.special_badges.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 mb-3">
|
||||
{contributor.special_badges.map((badge) => (
|
||||
<SpecialBadge key={badge} badge={badge} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||||
{showPeriodStats ? (
|
||||
<>
|
||||
{periodStats.parks_added > 0 && (
|
||||
<StatCard label="Parks" value={periodStats.parks_added} />
|
||||
)}
|
||||
{periodStats.rides_added > 0 && (
|
||||
<StatCard label="Rides" value={periodStats.rides_added} />
|
||||
)}
|
||||
{periodStats.photos_added > 0 && (
|
||||
<StatCard label="Photos" value={periodStats.photos_added} />
|
||||
)}
|
||||
{periodStats.reviews_added > 0 && (
|
||||
<StatCard label="Reviews" value={periodStats.reviews_added} />
|
||||
)}
|
||||
{periodStats.edits_made > 0 && (
|
||||
<StatCard label="Edits" value={periodStats.edits_made} />
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{allTimeStats.total_parks > 0 && (
|
||||
<StatCard label="Parks" value={allTimeStats.total_parks} />
|
||||
)}
|
||||
{allTimeStats.total_rides > 0 && (
|
||||
<StatCard label="Rides" value={allTimeStats.total_rides} />
|
||||
)}
|
||||
{allTimeStats.total_photos > 0 && (
|
||||
<StatCard label="Photos" value={allTimeStats.total_photos} />
|
||||
)}
|
||||
{allTimeStats.total_reviews > 0 && (
|
||||
<StatCard label="Reviews" value={allTimeStats.total_reviews} />
|
||||
)}
|
||||
{allTimeStats.total_edits > 0 && (
|
||||
<StatCard label="Edits" value={allTimeStats.total_edits} />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Total Score */}
|
||||
<div className="mt-3 pt-3 border-t flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<TrendingUp className="w-4 h-4" />
|
||||
<span>Contribution Score</span>
|
||||
</div>
|
||||
<Badge variant="secondary" className="text-base font-bold">
|
||||
{totalContributions.toLocaleString()} pts
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function StatCard({ label, value }: { label: string; value: number }) {
|
||||
return (
|
||||
<div className="bg-muted/50 rounded-lg p-2 text-center">
|
||||
<div className="text-xs text-muted-foreground mb-1">{label}</div>
|
||||
<div className="text-lg font-bold">{value.toLocaleString()}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user