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
Standard profile page orchestrator with cover image, avatar, name/verification display, stat counters, tab navigation, and content area. Every user, business, organisation, and group profile uses this layout across the ecosystem. The developer provides the tab content as children.
View the full component source code below.
"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
import { useNyuchiHarness } from "@/lib/harness"
/* ═══════════════════════════════════════════════════════════════
NYUCHI PROFILE PAGE LAYOUT — Layer 6 Page Orchestrator
Standard profile screen. Cover + avatar + stats + tabs.
Used for users, businesses, organisations, groups, creators.
✅ HARNESS ✅ TOKENS ✅ RESPONSIVE ✅ TOUCH 48px+
═══════════════════════════════════════════════════════════════ */
interface ProfileTab { id: string; label: string; count?: number }
interface ProfileStat { label: string; value: string | number }
interface NyuchiProfilePageLayoutProps {
coverUrl?: string
avatarUrl?: string
name: string
subtitle?: string
verified?: boolean
verificationTier?: 0 | 1 | 2 | 3 | 4
stats?: ProfileStat[]
tabs: ProfileTab[]
activeTab?: string
onTabChange?: (id: string) => void
/** Primary action (Follow, Edit, Contact) */
primaryAction?: { label: string; onClick: () => void }
/** Secondary action (Message, Share) */
secondaryAction?: { label: string; onClick: () => void }
/** Back navigation */
onBack?: () => void
/** Tab content */
children: React.ReactNode
className?: string
}
const tierBadge = ["", "🟤", "🔵", "🟡", "🟣"] as const
export function NyuchiProfilePageLayout({
coverUrl, avatarUrl, name, subtitle, verified, verificationTier = 0,
stats, tabs, activeTab, onTabChange, primaryAction, secondaryAction,
onBack, children, loading = false, className,
}: NyuchiProfilePageLayoutProps) {
const { log } = useNyuchiHarness("profile-page-layout")
const [active, setActive] = React.useState(activeTab || tabs[0]?.id)
return (
<div data-slot="nyuchi-profile-page-layout" data-portal="https://design.nyuchi.com/components/nyuchi-profile-page-layout" className={cn("min-h-screen bg-background", className)}>
{/* Cover */}
<div className="relative h-40 sm:h-52 bg-gradient-to-br from-[var(--brand-accent,var(--status-success, var(--color-malachite, #64FFDA)))]/20 to-muted"
style={coverUrl ? { backgroundImage: `url(${coverUrl})`, backgroundSize: "cover", backgroundPosition: "center" } : undefined}>
{onBack && (
<button onClick={onBack} className="absolute left-4 top-4 flex size-10 items-center justify-center rounded-full bg-background/80 backdrop-blur-sm text-foreground" aria-label="Go back">←</button>
)}
</div>
{/* Avatar + name block — overlapping cover */}
<div className="relative px-4 sm:px-6 -mt-12">
<div className="mx-auto max-w-2xl">
<div className="flex items-end gap-4">
<div className="size-20 sm:size-24 shrink-0 rounded-full border-4 border-background bg-muted flex items-center justify-center text-2xl font-bold text-muted-foreground overflow-hidden">
{avatarUrl ? <img src={avatarUrl} alt={name} className="size-full object-cover" /> : name.charAt(0).toUpperCase()}
</div>
<div className="flex-1 min-w-0 pb-1">
<div className="flex items-center gap-1.5">
<h1 className="text-lg font-bold text-foreground truncate">{name}</h1>
{verified && verificationTier > 0 && <span>{tierBadge[verificationTier]}</span>}
</div>
{subtitle && <p className="text-sm text-muted-foreground truncate">{subtitle}</p>}
</div>
</div>
{/* Stats */}
{stats && stats.length > 0 && (
<div className="flex gap-6 mt-4">
{stats.map(s => (
<div key={s.label} className="text-center">
<p className="text-base font-bold text-foreground">{typeof s.value === "number" ? s.value.toLocaleString() : s.value}</p>
<p className="text-[11px] text-muted-foreground">{s.label}</p>
</div>
))}
</div>
)}
{/* Action buttons */}
{(primaryAction || secondaryAction) && (
<div className="flex gap-2 mt-4">
{primaryAction && (
<button onClick={primaryAction.onClick} className="flex-1 h-12 rounded-full bg-[var(--brand-accent,var(--status-success, var(--color-malachite, #64FFDA)))] text-[#0A0A0A] text-[13px] font-medium hover:opacity-80 transition-opacity">{primaryAction.label}</button>
)}
{secondaryAction && (
<button onClick={secondaryAction.onClick} className="flex-1 h-12 rounded-full bg-muted text-foreground border border-border text-[13px] font-medium hover:opacity-80 transition-opacity">{secondaryAction.label}</button>
)}
</div>
)}
{/* Tabs */}
<div className="flex gap-0 mt-6 border-b border-border overflow-x-auto scrollbar-none">
{tabs.map(t => (
<button key={t.id} onClick={() => { setActive(t.id); onTabChange?.(t.id) }}
className={cn("shrink-0 px-4 py-3 text-sm font-medium transition-colors border-b-2 min-h-[48px]",
active === t.id ? "border-[var(--brand-accent,var(--status-success, var(--color-malachite, #64FFDA)))] text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
)}>
{t.label}{t.count != null && <span className="ml-1.5 text-xs text-muted-foreground">{t.count}</span>}
</button>
))}
</div>
</div>
</div>
{/* Tab content */}
<div className="mx-auto max-w-2xl px-4 py-6 sm:px-6">
{children}
</div>
</div>
)
}
npx shadcn@latest add https://mzizi.dev/api/v1/ui/nyuchi-profile-page-layoutFetch this component's metadata and source code from the registry API.
/api/v1/ui/nyuchi-profile-page-layout