feat: add profile components (header, stats, contributions)

2026-04-26 09:53:56 -05:00
parent 544cdb29cd
commit b586ceb837
3 changed files with 196 additions and 0 deletions
@@ -0,0 +1,88 @@
+"use client"
+
+import Image from "next/image"
+import Link from "next/link"
+import { Cpu, Clock, TrendingUp, CheckCircle } from "lucide-react"
+import { motion } from "motion/react"
+import type { ContributionEntry } from "@/types/api"
+
+interface ContributionListProps {
+  entries: ContributionEntry[]
+  showViewAll?: boolean
+  totalCount?: number
+}
+
+export function ContributionList({ entries, showViewAll = false, totalCount }: ContributionListProps) {
+  if (entries.length === 0) {
+    return (
+      <div className="text-center py-12 text-text/40">
+        <TrendingUp className="h-8 w-8 mx-auto mb-2" />
+        <p>No contributions yet</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-3">
+      {showViewAll && totalCount && totalCount > entries.length && (
+        <div className="flex justify-end">
+          <span className="text-xs text-text/40">
+            Showing {entries.length} of {totalCount}
+          </span>
+        </div>
+      )}
+      {entries.map((entry, i) => (
+        <motion.div
+          key={entry.id}
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: i * 0.05 }}
+        >
+          <Link
+            href={`/game/${entry.gameId}`}
+            className="flex items-center gap-4 p-3 rounded-lg bg-text/5 border border-border hover:border-primary/30 transition-colors"
+          >
+            {entry.gameHeaderImage ? (
+              <Image
+                src={entry.gameHeaderImage}
+                alt={entry.gameTitle}
+                width={80}
+                height={36}
+                unoptimized
+                className="rounded h-9 w-20 object-cover shrink-0"
+              />
+            ) : (
+              <div className="h-9 w-20 rounded bg-text/10 shrink-0" />
+            )}
+
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium truncate">{entry.gameTitle}</p>
+              <div className="flex items-center gap-3 mt-1 text-xs text-text/50">
+                <span className="flex items-center gap-1">
+                  <Cpu className="h-3 w-3" />
+                  {entry.hardwareName}
+                </span>
+                <span className="flex items-center gap-1">
+                  <Clock className="h-3 w-3" />
+                  {new Date(entry.createdAt).toLocaleDateString()}
+                </span>
+              </div>
+            </div>
+
+            <div className="text-right shrink-0">
+              <div className="text-sm font-bold text-primary">
+                {entry.fpsAvg.toFixed(0)} FPS
+              </div>
+              {entry.verifiedAt && (
+                <div className="flex items-center gap-1 text-xs text-green-400 mt-0.5">
+                  <CheckCircle className="h-3 w-3" />
+                  Verified
+                </div>
+              )}
+            </div>
+          </Link>
+        </motion.div>
+      ))}
+    </div>
+  )
+}
@@ -0,0 +1,70 @@
+"use client"
+
+import Image from "next/image"
+import { User, Shield, Crown, CheckCircle } from "lucide-react"
+import { motion } from "motion/react"
+
+interface ProfileHeaderProps {
+  name: string
+  image: string | null
+  role: string | null
+  verified: boolean
+  createdAt: string
+}
+
+const roleConfig: Record<string, { label: string; color: string; icon: typeof User }> = {
+  admin: { label: "Admin", color: "bg-yellow-500/20 text-yellow-400 border-yellow-500/30", icon: Crown },
+  contributor: { label: "Contributor", color: "bg-blue-500/20 text-blue-400 border-blue-500/30", icon: Shield },
+  user: { label: "Member", color: "bg-text/10 text-text/60 border-text/20", icon: User },
+}
+
+export function ProfileHeader({ name, image, role, verified, createdAt }: ProfileHeaderProps) {
+  const config = roleConfig[role || "user"] || roleConfig.user
+  const RoleIcon = config.icon
+
+  const joinDate = new Date(createdAt).toLocaleDateString("en-US", {
+    month: "long",
+    year: "numeric",
+  })
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      className="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6"
+    >
+      <div className="relative shrink-0">
+        {image ? (
+          <Image
+            src={image}
+            alt={name}
+            width={96}
+            height={96}
+            unoptimized
+            className="h-24 w-24 rounded-full border-2 border-border"
+          />
+        ) : (
+          <div className="h-24 w-24 rounded-full bg-secondary/50 border-2 border-border flex items-center justify-center">
+            <User className="h-10 w-10 text-text/40" />
+          </div>
+        )}
+        {verified && (
+          <div className="absolute -bottom-1 -right-1 h-6 w-6 rounded-full bg-green-500 border-2 border-background flex items-center justify-center">
+            <CheckCircle className="h-4 w-4 text-white" />
+          </div>
+        )}
+      </div>
+
+      <div className="text-center sm:text-left">
+        <div className="flex flex-col sm:flex-row items-center gap-2">
+          <h1 className="text-2xl font-bold">{name}</h1>
+          <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border ${config.color}`}>
+            <RoleIcon className="h-3 w-3" />
+            {config.label}
+          </span>
+        </div>
+        <p className="text-sm text-text/50 mt-1">Member since {joinDate}</p>
+      </div>
+    </motion.div>
+  )
+}
@@ -0,0 +1,38 @@
+"use client"
+
+import { TrendingUp, CheckCircle, Star } from "lucide-react"
+import { motion } from "motion/react"
+
+interface StatsRowProps {
+  contributions: number
+  verifiedEntries: number
+  reputation: number
+}
+
+export function StatsRow({ contributions, verifiedEntries, reputation }: StatsRowProps) {
+  const stats = [
+    { label: "Contributions", value: contributions, icon: TrendingUp, color: "text-primary" },
+    { label: "Verified", value: verifiedEntries, icon: CheckCircle, color: "text-green-400" },
+    { label: "Reputation", value: reputation, icon: Star, color: "text-accent" },
+  ]
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.1 }}
+      className="grid grid-cols-3 gap-4"
+    >
+      {stats.map((stat) => (
+        <div
+          key={stat.label}
+          className="flex flex-col items-center p-4 rounded-xl bg-text/5 border border-border"
+        >
+          <stat.icon className={`h-5 w-5 ${stat.color} mb-2`} />
+          <span className="text-2xl font-bold">{stat.value}</span>
+          <span className="text-xs text-text/50">{stat.label}</span>
+        </div>
+      ))}
+    </motion.div>
+  )
+}