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
Honeycomb node health and earnings display. Shows node type (consumer/business/infrastructure), uptime, storage contributed, NHC earned, and peer count. Used in the Honeycomb network dashboard.
No interactive demo is registered for this component yet — the source is shown directly.
import * as React from "react"
import { cn } from "@/lib/utils"
type NodeType = "consumer" | "business" | "infrastructure"
interface NodeStatusCardProps extends React.ComponentProps<"div"> {
nodeId: string
type: NodeType
status: "online" | "syncing" | "offline"
uptime: number
storageUsedGB: number
storageTotalGB: number
nhcEarned: number
peerCount: number
}
const statusStyles = {
online: { dot: "bg-[var(--color-malachite,#64FFDA)]", label: "Online" },
syncing: { dot: "bg-[var(--color-gold,#FFD740)]", label: "Syncing" },
offline: { dot: "bg-destructive", label: "Offline" },
}
function NodeStatusCard({
nodeId, type, status, uptime, storageUsedGB, storageTotalGB, nhcEarned, peerCount, loading = false, className, ...props
}: NodeStatusCardProps) {
const storagePct = (storageUsedGB / storageTotalGB) * 100
return (
<div
data-slot="node-status-card" data-portal="https://design.nyuchi.com/components/node-status-card" role="article"
className={cn("rounded-[var(--radius-lg,14px)] border border-border bg-card p-4", className)}
{...props}
>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<div className={cn("size-2 rounded-full", statusStyles[status].dot)} />
<span className="text-sm font-medium capitalize">{type} Node</span>
</div>
<span className="text-xs text-muted-foreground">{statusStyles[status].label}</span>
</div>
<div className="mt-3 grid grid-cols-2 gap-3">
<div>
<div className="text-[10px] text-muted-foreground">Uptime</div>
<div className="text-sm font-medium tabular-nums">{uptime.toFixed(1)}%</div>
</div>
<div>
<div className="text-[10px] text-muted-foreground">Peers</div>
<div className="text-sm font-medium tabular-nums">{peerCount}</div>
</div>
<div>
<div className="text-[10px] text-muted-foreground">Storage</div>
<div className="text-sm font-medium tabular-nums">{storageUsedGB}/{storageTotalGB} GB</div>
<div className="mt-1 h-1 overflow-hidden rounded-full bg-muted">
<div className="h-full rounded-full bg-[var(--color-cobalt,#00B0FF)]" style={{ width: `${storagePct}%` }} />
</div>
</div>
<div>
<div className="text-[10px] text-muted-foreground">NHC Earned</div>
<div className="text-sm font-medium tabular-nums text-[var(--color-gold,#FFD740)]">{nhcEarned.toLocaleString()}</div>
</div>
</div>
<div className="mt-2 font-mono text-[9px] text-muted-foreground truncate">{nodeId}</div>
</div>
)
}
export { NodeStatusCard }
export type { NodeStatusCardProps }
The variants, sizes, and props surfaced by the registry. Each is sourced from the Supabase component_docs table.
Hit the registry API live and see the JSON the shadcn CLI consumes when it installs this component.
/api/v1/ui/node-status-cardnpx shadcn@latest add https://mzizi.dev/api/v1/ui/node-status-card