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.
View the full component source code below.
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 }
npx shadcn@latest add https://mzizi.dev/api/v1/ui/node-status-cardFetch this component's metadata and source code from the registry API.
/api/v1/ui/node-status-card