nyuchimzizi
Mzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Five African Minerals palette.
Built by Nyuchi Africav4.0.39
Ranked leaderboard row with position indicator, avatar, name, score, and trend. Maps to ubuntu.leaderboards table. Used in community rankings, Ubuntu point leaderboards, and competitive features. Top 3 positions get mineral-colored rank badges (Gold, Tanzanite, Cobalt).
View the full component source code below.
"use client"
// ── INFRASTRUCTURE HARNESS (auto-wired) ──
// Every brand component participates in observability, motion, a11y,
// and health monitoring via the harness. Zero manual config.
import { useNyuchiHarness } from "@/lib/harness"
import * as React from "react"
import { TrendingUp, TrendingDown, Minus, Star } from "@/lib/icons"
import { cn } from "@/lib/utils"
const podiumColors = ["var(--color-gold,#FFD740)", "var(--color-tanzanite,#B388FF)", "var(--color-cobalt,#00B0FF)"] /* Gold, Tanzanite, Cobalt */
interface NyuchiLeaderboardRowProps {
loading?: boolean
position: number
name: string
avatar?: string
score: number | string
scoreLabel?: string
trend?: "up" | "down" | "same"
trendPositions?: number
isCurrentUser?: boolean
verifiedBadge?: React.ReactNode
onClick?: () => void
className?: string
}
function NyuchiLeaderboardRow({ loading = false,
position, name, avatar, score, scoreLabel = "pts",
trend, trendPositions, isCurrentUser, verifiedBadge,
onClick, className,
}: NyuchiLeaderboardRowProps) {
const { log, motion, LiveRegion } = useNyuchiHarness("leaderboard-row")
const animStyle = React.useMemo(() => motion.prefersReduced ? {} : { animation: `nyuchi-fade-slide-up ${motion.enterDuration}ms ${motion.enterEasing} both` }, [motion])
if (loading) return (<div data-slot="nyuchi-leaderboard-row" data-portal="https://design.nyuchi.com/components/nyuchi-leaderboard-row" data-loading role="listitem" className="animate-pulse flex items-center gap-3 py-2"><div className="h-4 w-6 rounded bg-muted" /><div className="size-8 rounded-full bg-muted" /><div className="flex-1 h-3.5 rounded bg-muted" /><div className="h-4 w-12 rounded bg-muted" /></div>)
const isPodium = position <= 3
const podiumColor = isPodium ? podiumColors[position - 1] : undefined
const initials = name.split(" ").map(n => n[0]).join("").slice(0, 2)
return (
<div data-slot="nyuchi-leaderboard-row" role="listitem" onClick={onClick}
className={cn(
"flex items-center gap-3 px-4 py-3 transition-colors",
isCurrentUser && "bg-[var(--color-malachite)]/[0.04]",
onClick && "cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary,#00B0FF)] hover:bg-foreground/[0.02]",
className
)}>
{/* Position */}
<div className={cn("flex size-8 shrink-0 items-center justify-center rounded-full text-xs font-bold",
isPodium ? "text-background" : "text-muted-foreground ring-1 ring-foreground/10"
)} style={isPodium ? { backgroundColor: podiumColor } : undefined}>
{position}
</div>
{/* Avatar */}
<div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted">
{avatar ? <img src={avatar} alt="" className="size-full object-cover" />
: <span className="text-xs font-semibold text-muted-foreground">{initials}</span>}
</div>
{/* Name */}
<div className="min-w-0 flex-1">
<div className="flex items-center gap-1.5">
<span className={cn("truncate text-sm", isCurrentUser ? "font-bold text-foreground" : "font-medium text-foreground")}>{name}</span>
{verifiedBadge}
</div>
</div>
{/* Score */}
<div className="flex shrink-0 items-center gap-2">
{trend && (
<span className={cn("flex items-center gap-0.5 text-[10px]",
trend === "up" ? "text-[#4ADE80]" : trend === "down" ? "text-[#F87171]" : "text-muted-foreground"
)}>
{trend === "up" ? <TrendingUp className="size-3" /> : trend === "down" ? <TrendingDown className="size-3" /> : <Minus className="size-3" />}
{trendPositions && trendPositions}
</span>
)}
<span className="flex items-center gap-1 text-sm font-semibold text-foreground">
<Star className="size-3 text-[var(--color-gold)]" />{typeof score === "number" ? score.toLocaleString() : score}
</span>
</div>
</div>
)
}
export { NyuchiLeaderboardRow }
export type { NyuchiLeaderboardRowProps }
npx shadcn@latest add https://mzizi.dev/api/v1/ui/nyuchi-leaderboard-rowFetch this component's metadata and source code from the registry API.
/api/v1/ui/nyuchi-leaderboard-rowcomponents/mukoko/mukoko-leaderboard-row.tsx