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
Universal branded alert banner with mineral-coded severity levels. Used across all ecosystem apps for weather alerts, system notifications, security warnings, trust advisories, and any time-sensitive information. Severity maps to minerals: watch=cobalt, moderate=terracotta, severe=gold. Renders as a prominent banner with dismiss, detail action, and safety instructions.
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 ALERT BANNER — Brand Component (Pre-Wired)
Universal mineral-coded severity alert. Used for weather, security, trust, system alerts.
Cross-app alert displayed across the entire ecosystem.
✅ HARNESS ✅ TOKENS ✅ STRICT MINERAL RULES ✅ TOUCH 48px+
═══════════════════════════════════════════════════════════════ */
interface NyuchiWeatherAlertProps {
type: string; severity: "watch" | "moderate" | "severe"
headline: string; description?: string; areas?: string[]
validFrom?: string; validUntil?: string; instructions?: string
onDismiss?: () => void; onDetails?: () => void; className?: string
}
const severityConfig = {
watch: { mineral: "var(--severity-cold, #3B82F6)", bg: "var(--color-cobalt,#00B0FF)", icon: "👁", label: "Watch" },
moderate: { mineral: "var(--severity-high,var(--color-terracotta,#D4A574))", bg: "var(--color-terracotta,#D4A574)", icon: "⚠️", label: "Moderate" },
severe: { mineral: "var(--severity-severe, #EF4444)", bg: "var(--color-gold,#FFD740)", icon: "🚨", label: "Severe" },
} as const
export function NyuchiWeatherAlert({ type, severity, headline, description, areas, validFrom, validUntil, instructions, onDismiss, onDetails, className }: NyuchiWeatherAlertProps) {
const { log, motion, LiveRegion } = useNyuchiHarness("alert-banner")
const animStyle = React.useMemo(() => motion.prefersReduced ? {} : { animation: `nyuchi-fade-slide-up ${motion.enterDuration}ms ${motion.enterEasing} both` }, [motion])
const config = severityConfig[severity]
return (
<div data-slot="nyuchi-alert-banner" data-portal="https://design.nyuchi.com/components/nyuchi-alert-banner" role="alert" className={cn("rounded-[var(--radius-lg,14px)] border-l-[3px] p-4 space-y-2", className)} style={{ borderLeftColor: config.mineral, backgroundColor: `color-mix(in srgb, ${config.bg} 8%, var(--card))` }}>
<div className="flex items-start justify-between gap-2">
<div className="flex items-center gap-2"><span>{config.icon}</span><span className="text-xs font-bold uppercase tracking-wider" style={{ color: config.mineral }}>{config.label} — {type}</span></div>
{onDismiss && <button onClick={onDismiss} className="text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary,#00B0FF)] min-h-[48px] hover:text-foreground text-sm" aria-label="Dismiss">✕</button>}
</div>
<p className="text-sm font-semibold text-foreground" style={{ fontFamily: "var(--font-serif)" }}>{headline}</p>
{description && <p className="text-xs text-muted-foreground leading-relaxed">{description}</p>}
{areas && areas.length > 0 && <p className="text-[11px] text-muted-foreground">Areas: {areas.join(", ")}</p>}
{(validFrom || validUntil) && <p className="text-[10px] text-muted-foreground">{validFrom && `From ${validFrom}`}{validUntil && ` until ${validUntil}`}</p>}
{instructions && <div className="rounded-[var(--radius-sm,7px)] bg-muted p-2.5"><p className="text-xs text-foreground leading-relaxed">⚡ {instructions}</p></div>}
{onDetails && <button onClick={onDetails} className="h-10 rounded-full text-[12px] font-medium px-4 transition-opacity hover:opacity-80" style={{ backgroundColor: config.mineral, color: "var(--foreground, #0A0A0A)" }}>View Details</button>}
</div>
)
}
npx shadcn@latest add https://mzizi.dev/api/v1/ui/nyuchi-alert-bannerFetch this component's metadata and source code from the registry API.
/api/v1/ui/nyuchi-alert-banner