julienfroidefond/got-gaming
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add bio field to user model and update related components: Enhance leaderboard and profile features by including a bio field in user data. Update API routes, UI components, and validation logic to support bio input and display, improving user profiles and leaderboard entries.

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-09 22:00:19 +01:00
parent 16b0437ecb
commit 3a0dd57bb6
13 changed files with 147 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/LeaderboardSection.tsx
View File

@@ -6,6 +6,7 @@ interface LeaderboardEntry {
score: number;
level: number;
avatar?: string | null;
bio?: string | null;
}
interface LeaderboardSectionProps {
@@ -23,7 +24,7 @@ export default function LeaderboardSection({
backgroundImage,
}: LeaderboardSectionProps) {
return (
<section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24 pb-16">
<section className="relative w-full min-h-screen flex flex-col items-center justify-center pt-24 pb-16">
{/* Background Image */}
<div
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
@@ -57,7 +58,7 @@ export default function LeaderboardSection({
</div>
{/* Leaderboard Table */}
<div className="bg-black/60 border border-pixel-gold/30 rounded-lg overflow-hidden backdrop-blur-sm">
<div className="bg-black/60 border border-pixel-gold/30 rounded-lg backdrop-blur-sm">
{/* Header */}
<div className="bg-gray-900/80 border-b border-pixel-gold/30 grid grid-cols-12 gap-4 p-4 font-bold text-xs uppercase tracking-widest text-gray-300">
<div className="col-span-1 text-center">Rank</div>
@@ -67,11 +68,11 @@ export default function LeaderboardSection({
</div>
{/* Entries */}
<div className="divide-y divide-pixel-gold/10">
<div className="divide-y divide-pixel-gold/10 overflow-visible">
{leaderboard.map((entry) => (
<div
key={entry.rank}
className={`grid grid-cols-12 gap-4 p-4 hover:bg-gray-900/50 transition ${
className={`grid grid-cols-12 gap-4 p-4 hover:bg-gray-900/50 transition relative ${
entry.rank <= 3
? "bg-gradient-to-r from-pixel-gold/10 via-pixel-gold/5 to-transparent"
: "bg-black/40"
@@ -95,7 +96,7 @@ export default function LeaderboardSection({
</div>
{/* Player */}
<div className="col-span-6 flex items-center gap-3">
<div className="col-span-6 flex items-center gap-3 relative group">
{entry.avatar ? (
<div className="w-10 h-10 rounded-full border border-pixel-gold/30 overflow-hidden">
<img
@@ -112,7 +113,7 @@ export default function LeaderboardSection({
</div>
)}
<span
className={`font-bold ${
className={`font-bold cursor-pointer relative z-10 ${
entry.rank <= 3 ? "text-pixel-gold" : "text-white"
}`}
>
@@ -121,6 +122,16 @@ export default function LeaderboardSection({
{entry.rank <= 3 && (
<span className="text-pixel-gold text-xs">✦</span>
)}
{entry.bio && (
<div className="absolute left-0 top-full mt-1 z-[100] w-72 p-4 bg-black border-2 border-pixel-gold/70 rounded-lg shadow-2xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 pointer-events-none">
<div className="text-xs text-pixel-gold uppercase tracking-widest mb-2 border-b border-pixel-gold/30 pb-1 font-bold">
Bio
</div>
<p className="text-sm text-gray-200 leading-relaxed whitespace-pre-wrap break-words">
{entry.bio}
</p>
</div>
)}
</div>
{/* Score */}