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 detail page orchestrator. Hero section with cover image, back/share/like actions, content body, related items section, and sticky bottom CTA. Every content detail screen uses this: event detail, article detail, product detail, place detail, job detail, profile detail, novel detail. The developer provides the hero content, body sections, and action handlers.
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 DETAIL PAGE — Layer 6 Page Orchestrator
The standard detail screen for viewing any single content item.
Composes L3 detail-layout + brand components into a full page.
✅ HARNESS ✅ TOKENS ✅ RESPONSIVE ✅ ERROR BOUNDARIES
═══════════════════════════════════════════════════════════════ */
interface NyuchiDetailPageProps {
/** Cover image URL */
coverUrl?: string
/** Cover gradient fallback (mineral-tinted) */
coverGradient?: string
/** Back navigation handler */
onBack?: () => void
/** Share handler */
onShare?: () => void
/** Like/save handler */
onSave?: () => void
/** Whether item is saved */
saved?: boolean
/** Main content — rendered in the body area */
children: React.ReactNode
/** Sticky bottom CTA */
ctaLabel?: string
ctaAction?: () => void
/** Secondary CTA */
secondaryLabel?: string
secondaryAction?: () => void
/** Related items section */
relatedTitle?: string
relatedItems?: React.ReactNode
className?: string
}
export function NyuchiDetailPage({
coverUrl, coverGradient, onBack, onShare, onSave, saved,
children, ctaLabel, ctaAction, secondaryLabel, secondaryAction,
relatedTitle, relatedItems, loading = false, className,
}: NyuchiDetailPageProps) {
const { log } = useNyuchiHarness("detail-page")
return (
<div data-slot="nyuchi-detail-page" data-portal="https://design.nyuchi.com/components/nyuchi-detail-page" className={cn("min-h-screen bg-background pb-28", className)}>
{/* Hero cover */}
<div className="relative h-56 sm:h-72" style={{
backgroundImage: coverUrl ? `url(${coverUrl})` : undefined,
backgroundSize: "cover", backgroundPosition: "center",
background: !coverUrl ? (coverGradient || "linear-gradient(135deg, var(--brand-accent,var(--status-success, var(--color-malachite, #64FFDA)))/20, var(--muted))") : undefined,
}}>
{/* Floating action buttons */}
<div className="absolute top-0 inset-x-0 flex items-center justify-between p-4 pt-[env(safe-area-inset-top,16px)]">
{onBack && (
<button onClick={onBack} className="flex size-10 items-center justify-center rounded-full bg-background/80 backdrop-blur-sm text-foreground" aria-label="Go back">←</button>
)}
<div className="flex gap-2 ml-auto">
{onSave && (
<button onClick={onSave} className={cn("flex size-10 items-center justify-center rounded-full backdrop-blur-sm", saved ? "bg-[var(--brand-accent,var(--status-success, var(--color-malachite, #64FFDA)))] text-[#0A0A0A]" : "bg-background/80 text-foreground")} aria-label={saved ? "Unsave" : "Save"}>
{saved ? "♥" : "♡"}
</button>
)}
{onShare && (
<button onClick={onShare} className="flex size-10 items-center justify-center rounded-full bg-background/80 backdrop-blur-sm text-foreground" aria-label="Share">↗</button>
)}
</div>
</div>
</div>
{/* Content body — overlaps hero slightly */}
<div className="relative -mt-6 rounded-t-[var(--radius-xl,17px)] bg-background">
<div className="mx-auto max-w-2xl px-4 py-6 sm:px-6">
{children}
</div>
</div>
{/* Related items */}
{relatedItems && (
<div className="border-t border-border mt-6">
<div className="mx-auto max-w-2xl px-4 py-6 sm:px-6">
{relatedTitle && <h3 className="text-sm font-semibold text-foreground mb-4">{relatedTitle}</h3>}
{relatedItems}
</div>
</div>
)}
{/* Sticky bottom CTA */}
{ctaAction && ctaLabel && (
<div className="fixed inset-x-0 bottom-0 z-40 border-t border-border bg-card/90 backdrop-blur-xl px-4 py-3 pb-[env(safe-area-inset-bottom,12px)]">
<div className="mx-auto max-w-2xl flex gap-2">
<button onClick={ctaAction} className="flex-1 h-14 rounded-full bg-[var(--brand-accent,var(--status-success, var(--color-malachite, #64FFDA)))] text-[#0A0A0A] text-[15px] font-semibold hover:opacity-80 transition-opacity">{ctaLabel}</button>
{secondaryAction && secondaryLabel && (
<button onClick={secondaryAction} className="h-14 rounded-full bg-muted text-foreground border border-border px-6 text-[13px] font-medium hover:opacity-80 transition-opacity">{secondaryLabel}</button>
)}
</div>
</div>
)}
</div>
)
}
npx shadcn@latest add https://mzizi.dev/api/v1/ui/nyuchi-detail-pageFetch this component's metadata and source code from the registry API.
/api/v1/ui/nyuchi-detail-page