feat(frontend): Add smooth page transitions and animations
Some checks are pending
Deploy Elmeg / deploy (push) Waiting to run
Some checks are pending
Deploy Elmeg / deploy (push) Waiting to run
This commit is contained in:
fullsizemalt
parent
cb91b5ad6d
commit
1ece5a037e
2 changed files with 165 additions and 88 deletions
|
|
@ -8,6 +8,7 @@ import Link from "next/link"
|
|||
import { Star, MapPin, Music, User, Trophy, Calendar, Sparkles } from "lucide-react"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||
import { motion, AnimatePresence } from "framer-motion"
|
||||
|
||||
interface TopShow {
|
||||
show: { id: number; date: string; venue_id: number }
|
||||
|
|
@ -87,14 +88,19 @@ export default function LeaderboardsPage() {
|
|||
|
||||
return (
|
||||
<div className="container py-10 space-y-8 max-w-5xl">
|
||||
<div className="flex flex-col gap-2">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="flex flex-col gap-2"
|
||||
>
|
||||
<h1 className="text-4xl font-bold tracking-tight bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
|
||||
Leaderboards
|
||||
</h1>
|
||||
<p className="text-xl text-muted-foreground">
|
||||
Discover the highest rated shows, legendary jams, and top contributors.
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<Tabs defaultValue="jams" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-4 mb-8 h-12">
|
||||
|
|
@ -106,61 +112,81 @@ export default function LeaderboardsPage() {
|
|||
|
||||
{/* HEADY JAMS CONTENT */}
|
||||
<TabsContent value="jams">
|
||||
<Card className="border-none shadow-none bg-transparent">
|
||||
<div className="grid gap-4">
|
||||
{topPerformances.map((item, i) => (
|
||||
<div
|
||||
key={item.performance.id}
|
||||
className="group relative flex items-center gap-4 rounded-xl border bg-card p-4 shadow-sm transition-all hover:shadow-md hover:border-primary/50"
|
||||
>
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-secondary/50 font-bold text-xl">
|
||||
<RankIcon rank={i + 1} />
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col justify-center gap-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link href={`/songs/${item.song.id}`} className="font-semibold text-lg hover:underline decoration-primary decoration-2 underline-offset-2">
|
||||
{item.song.title}
|
||||
</Link>
|
||||
{item.performance.notes && (
|
||||
<Badge variant="outline" className="text-[10px] font-normal hidden sm:inline-flex">
|
||||
{item.performance.notes}
|
||||
</Badge>
|
||||
)}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<Card className="border-none shadow-none bg-transparent">
|
||||
<div className="grid gap-4">
|
||||
{topPerformances.map((item, i) => (
|
||||
<motion.div
|
||||
key={item.performance.id}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: i * 0.05 }}
|
||||
className="group relative flex items-center gap-4 rounded-xl border bg-card p-4 shadow-sm transition-all hover:shadow-md hover:border-primary/50"
|
||||
>
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-secondary/50 font-bold text-xl">
|
||||
<RankIcon rank={i + 1} />
|
||||
</div>
|
||||
<div className="flex items-center text-sm text-muted-foreground gap-2">
|
||||
<Calendar className="h-3 w-3" />
|
||||
<Link href={`/shows/${item.show.id}`} className="hover:text-primary transition-colors">
|
||||
{new Date(item.show.date).toLocaleDateString(undefined, {
|
||||
weekday: 'short', year: 'numeric', month: 'short', day: 'numeric'
|
||||
})}
|
||||
</Link>
|
||||
<span className="text-muted-foreground/50">•</span>
|
||||
<span className="truncate max-w-[200px]">{item.venue.name}</span>
|
||||
<div className="flex flex-1 flex-col justify-center gap-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link href={`/songs/${item.song.id}`} className="font-semibold text-lg hover:underline decoration-primary decoration-2 underline-offset-2">
|
||||
{item.song.title}
|
||||
</Link>
|
||||
{item.performance.notes && (
|
||||
<Badge variant="outline" className="text-[10px] font-normal hidden sm:inline-flex">
|
||||
{item.performance.notes}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center text-sm text-muted-foreground gap-2">
|
||||
<Calendar className="h-3 w-3" />
|
||||
<Link href={`/shows/${item.show.id}`} className="hover:text-primary transition-colors">
|
||||
{new Date(item.show.date).toLocaleDateString(undefined, {
|
||||
weekday: 'short', year: 'numeric', month: 'short', day: 'numeric'
|
||||
})}
|
||||
</Link>
|
||||
<span className="text-muted-foreground/50">•</span>
|
||||
<span className="truncate max-w-[200px]">{item.venue.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-end justify-center min-w-[80px]">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Star className="h-4 w-4 fill-yellow-500 text-yellow-500" />
|
||||
<span className="text-xl font-bold">{item.avg_score.toFixed(2)}</span>
|
||||
<div className="flex flex-col items-end justify-center min-w-[80px]">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Star className="h-4 w-4 fill-yellow-500 text-yellow-500" />
|
||||
<span className="text-xl font-bold">{item.avg_score.toFixed(2)}</span>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">{item.rating_count} votes</span>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">{item.rating_count} votes</span>
|
||||
</motion.div>
|
||||
))}
|
||||
{topPerformances.length === 0 && (
|
||||
<div className="text-center py-12 text-muted-foreground">
|
||||
No ranked jams yet. Start rating performances!
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{topPerformances.length === 0 && (
|
||||
<div className="text-center py-12 text-muted-foreground">
|
||||
No ranked jams yet. Start rating performances!
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</TabsContent>
|
||||
|
||||
{/* TOP SHOWS CONTENT */}
|
||||
<TabsContent value="shows">
|
||||
<div className="grid gap-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="grid gap-4"
|
||||
>
|
||||
{topShows.map((item, i) => (
|
||||
<div key={item.show.id} className="flex items-center justify-between p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors">
|
||||
<motion.div
|
||||
key={item.show.id}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: i * 0.05 }}
|
||||
className="flex items-center justify-between p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="font-mono text-muted-foreground w-6 text-center">{i + 1}</div>
|
||||
<div>
|
||||
|
|
@ -181,16 +207,27 @@ export default function LeaderboardsPage() {
|
|||
</div>
|
||||
<div className="text-xs text-muted-foreground">{item.review_count} ratings</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</TabsContent>
|
||||
|
||||
{/* VENUES CONTENT */}
|
||||
<TabsContent value="venues">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="grid gap-4 md:grid-cols-2"
|
||||
>
|
||||
{topVenues.map((item, i) => (
|
||||
<div key={item.venue.id} className="flex items-center justify-between p-4 rounded-lg border bg-card/50">
|
||||
<motion.div
|
||||
key={item.venue.id}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: i * 0.05 }}
|
||||
className="flex items-center justify-between p-4 rounded-lg border bg-card/50"
|
||||
>
|
||||
<div className="flex items-center gap-3 overflow-hidden">
|
||||
<div className={`
|
||||
flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold shrink-0
|
||||
|
|
@ -211,29 +248,41 @@ export default function LeaderboardsPage() {
|
|||
<Star className="h-3 w-3 fill-current" />
|
||||
{item.avg_score.toFixed(2)}
|
||||
</Badge>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</TabsContent>
|
||||
|
||||
{/* USERS CONTENT */}
|
||||
<TabsContent value="users">
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="grid gap-4 md:grid-cols-3"
|
||||
>
|
||||
{topUsers.map((item, i) => (
|
||||
<Card key={item.profile.id} className="flex flex-col items-center justify-center p-6 text-center hover:border-primary/50 transition-colors">
|
||||
<Avatar className="h-16 w-16 mb-4">
|
||||
<AvatarImage src={`https://api.dicebear.com/7.x/notionists/svg?seed=${item.profile.user_id}`} />
|
||||
<AvatarFallback>U</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="font-semibold text-lg">User {item.profile.user_id}</div>
|
||||
<p className="text-sm text-muted-foreground mb-3">Top Contributor</p>
|
||||
<Badge variant="outline" className="bg-primary/5">
|
||||
{item.review_count} Reviews
|
||||
</Badge>
|
||||
</Card>
|
||||
<motion.div
|
||||
key={item.profile.id}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: i * 0.05 }}
|
||||
>
|
||||
<Card className="flex flex-col items-center justify-center p-6 text-center hover:border-primary/50 transition-colors h-full">
|
||||
<Avatar className="h-16 w-16 mb-4">
|
||||
<AvatarImage src={`https://api.dicebear.com/7.x/notionists/svg?seed=${item.profile.user_id}`} />
|
||||
<AvatarFallback>U</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="font-semibold text-lg">User {item.profile.user_id}</div>
|
||||
<p className="text-sm text-muted-foreground mb-3">Top Contributor</p>
|
||||
<Badge variant="outline" className="bg-primary/5">
|
||||
{item.review_count} Reviews
|
||||
</Badge>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
{topUsers.length === 0 && <p className="col-span-3 text-center text-muted-foreground py-10">No active users yet.</p>}
|
||||
</div>
|
||||
</motion.div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import { UserAttendanceList } from "@/components/profile/user-attendance-list"
|
|||
import { UserReviewsList } from "@/components/profile/user-reviews-list"
|
||||
import { UserGroupsList } from "@/components/profile/user-groups-list"
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||
import { motion } from "framer-motion"
|
||||
|
||||
// Types
|
||||
interface UserProfile {
|
||||
|
|
@ -105,7 +106,12 @@ export default function ProfilePage() {
|
|||
return (
|
||||
<div className="container py-10 max-w-5xl space-y-8">
|
||||
{/* Header Section */}
|
||||
<div className="relative">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="relative"
|
||||
>
|
||||
<div className="absolute right-0 top-0">
|
||||
<Link href="/settings">
|
||||
<Button variant="outline" size="sm" className="gap-2">
|
||||
|
|
@ -159,7 +165,7 @@ export default function ProfilePage() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<Tabs defaultValue="overview" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-4 mb-8 h-12">
|
||||
|
|
@ -170,34 +176,56 @@ export default function ProfilePage() {
|
|||
</TabsList>
|
||||
|
||||
<TabsContent value="overview" className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Trophy className="h-5 w-5 text-yellow-500" />
|
||||
Achievements
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<BadgeList badges={displayBadges} />
|
||||
{displayBadges.length === 0 && (
|
||||
<p className="text-muted-foreground text-sm">No badges earned yet. Keep active!</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Recent Activity or generic stats summary could go here later */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Trophy className="h-5 w-5 text-yellow-500" />
|
||||
Achievements
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<BadgeList badges={displayBadges} />
|
||||
{displayBadges.length === 0 && (
|
||||
<p className="text-muted-foreground text-sm">No badges earned yet. Keep active!</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="attendance">
|
||||
<UserAttendanceList userId={user.id} />
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<UserAttendanceList userId={user.id} />
|
||||
</motion.div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="reviews">
|
||||
<UserReviewsList userId={user.id} />
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<UserReviewsList userId={user.id} />
|
||||
</motion.div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="groups">
|
||||
<UserGroupsList userId={user.id} />
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<UserGroupsList userId={user.id} />
|
||||
</motion.div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue