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
Branded weather forecast display with cobalt mineral accent. Shows current conditions, temperature, humidity, 5-day outlook, and farming/agriculture advisory for African rural contexts. Mineral-coded severity levels for weather alerts. Used in Weather home and as an embedded widget in Nhimbe event pages and BushTrade logistics.
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 FORECAST CARD — Brand Component (Pre-Wired)
Mineral: Cobalt (environment, information).
Weather forecast with farming advisory for African contexts.
✅ HARNESS ✅ TOKENS ✅ STRICT MINERAL RULES ✅ TOUCH 48px+
═══════════════════════════════════════════════════════════════ */
interface DayForecast { day: string; high: number; low: number; icon: string; condition: string }
interface NyuchiForecastCardProps {
location: string; temperature: number; unit?: "C" | "F"
condition: string; icon?: string; humidity?: number; windSpeed?: string
feelsLike?: number; forecast?: DayForecast[]; farmingAdvice?: string
lastUpdated?: string; onClick?: () => void; className?: string
}
export function NyuchiForecastCard({ loading = false, location, temperature, unit = "C", condition, icon, humidity, windSpeed, feelsLike, forecast = [], farmingAdvice, lastUpdated, onClick, className }: NyuchiForecastCardProps) {
const { log, motion, LiveRegion } = useNyuchiHarness("forecast-card")
const animStyle = React.useMemo(() => motion.prefersReduced ? {} : { animation: `nyuchi-fade-slide-up ${motion.enterDuration}ms ${motion.enterEasing} both` }, [motion])
if (loading) return (<div data-slot="nyuchi-forecast-card" data-portal="https://design.nyuchi.com/components/nyuchi-forecast-card" data-loading role="article" className="animate-pulse rounded-[var(--radius-lg,14px)] bg-card ring-1 ring-foreground/10 overflow-hidden"><div className="p-4 space-y-3"><div className="flex justify-between"><div className="space-y-2"><div className="h-2.5 w-20 rounded bg-muted" /><div className="h-8 w-16 rounded bg-muted" /></div><div className="size-10 rounded bg-muted" /></div></div><div className="border-t border-border px-2 py-3 flex justify-between">{Array.from({length:5}).map((_,i)=>(<div key={i} className="flex-1 flex flex-col items-center gap-1"><div className="h-2 w-6 rounded bg-muted" /><div className="size-6 rounded bg-muted" /><div className="h-2 w-4 rounded bg-muted" /></div>))}</div></div>)
return (
<div data-slot="nyuchi-forecast-card" role="article" tabIndex={0} className="focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary,#00B0FF)]" onClick={onClick} className={cn("bg-card rounded-[var(--radius-lg,14px)] border border-border overflow-hidden", onClick && "cursor-pointer", className)}>
<div className="bg-gradient-to-br from-[var(--color-cobalt,#00B0FF)]/10 to-transparent p-4 space-y-2">
<div className="flex items-start justify-between">
<div><p className="text-[11px] text-muted-foreground">📍 {location}</p><p className="text-4xl font-bold text-foreground mt-1">{temperature}°{unit}</p>{feelsLike != null && <p className="text-[11px] text-muted-foreground">Feels like {feelsLike}°{unit}</p>}</div>
<div className="text-right"><span className="text-3xl">{icon || "☀️"}</span><p className="text-xs text-foreground mt-1">{condition}</p></div>
</div>
<div className="flex items-center gap-3 text-[11px] text-muted-foreground">
{humidity != null && <span>💧 {humidity}%</span>}
{windSpeed && <span>💨 {windSpeed}</span>}
</div>
</div>
{forecast.length > 0 && (
<div className="border-t border-border px-2 py-3 flex justify-between">
{forecast.slice(0, 5).map((d, i) => (
<div key={i} className="flex-1 text-center space-y-1">
<p className="text-[10px] text-muted-foreground">{d.day}</p>
<p className="text-sm">{d.icon}</p>
<p className="text-[10px] text-foreground font-medium">{d.high}°</p>
<p className="text-[10px] text-muted-foreground">{d.low}°</p>
</div>
))}
</div>
)}
{farmingAdvice && (
<div className="border-t border-border px-4 py-3">
<p className="text-[10px] font-semibold text-[var(--color-malachite,#64FFDA)] mb-1">🌾 Farming Advisory</p>
<p className="text-xs text-muted-foreground leading-relaxed">{farmingAdvice}</p>
</div>
)}
{lastUpdated && <div className="px-4 pb-3"><p className="text-[9px] text-muted-foreground/60">Updated {lastUpdated}</p></div>}
</div>
)
}
npx shadcn@latest add https://mzizi.dev/api/v1/ui/nyuchi-forecast-cardFetch this component's metadata and source code from the registry API.
/api/v1/ui/nyuchi-forecast-card