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
Ancestral MIT display for deceased community members. Shows the person's fixed age, memorial badge, heritage data contribution status, and ancestral pool participation. Implements the visual layer of the MIT Ancestral Lifecycle Protocol.
View the full component source code below.
import * as React from "react"
import { cn } from "@/lib/utils"
interface AncestryMemorialProps extends React.ComponentProps<"div"> {
name: string
avatar?: string
fixedAge: number
dateOfPassing?: string
heritageContributions?: number
communityRole?: string
}
function AncestryMemorial({
name, avatar, fixedAge, dateOfPassing, heritageContributions, communityRole, loading = false, className, ...props
}: AncestryMemorialProps) {
return (
<div
data-slot="ancestry-memorial" data-portal="https://design.nyuchi.com/components/ancestry-memorial" role="article"
className={cn(
"rounded-[var(--radius-lg,14px)] border border-border bg-card p-4",
"bg-gradient-to-b from-card to-muted/30",
className
)}
{...props}
>
<div className="flex items-center gap-3">
<div className="relative">
<div className="flex size-14 items-center justify-center rounded-full bg-muted text-lg font-medium opacity-80">
{avatar ? <img src={avatar} alt={name} className="size-full rounded-full object-cover grayscale" /> : name.charAt(0)}
</div>
{/* Memorial ring */}
<div className="absolute -inset-0.5 rounded-full border-2 border-[var(--color-terracotta,#D4A574)]/40" />
</div>
<div>
<div className="text-sm font-semibold" style={{ fontFamily: "var(--font-serif, serif)" }}>{name}</div>
<div className="text-xs text-muted-foreground">
Age {fixedAge} · Ancestral
</div>
{communityRole && (
<div className="text-[10px] text-[var(--color-terracotta,#D4A574)]">{communityRole}</div>
)}
</div>
</div>
<div className="mt-3 flex items-center gap-3 text-xs text-muted-foreground">
{dateOfPassing && <span>Passed {new Date(dateOfPassing).toLocaleDateString(undefined, { month: "short", year: "numeric" })}</span>}
{heritageContributions !== undefined && (
<span>{heritageContributions.toLocaleString()} heritage contributions</span>
)}
</div>
<div className="mt-2 text-[10px] italic text-muted-foreground">
"Their wisdom lives in the archive alongside every ancestor's, building a digital heritage for the continent."
</div>
</div>
)
}
export { AncestryMemorial }
export type { AncestryMemorialProps }
npx shadcn@latest add https://mzizi.dev/api/v1/ui/ancestry-memorialFetch this component's metadata and source code from the registry API.
/api/v1/ui/ancestry-memorial