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 saved commute card showing a recurring route with estimated time, mode, and next departure. Gold mineral accent. Used in Transport home screen for quick access to daily commutes and in Planner as part of the daily schedule view. Renders inside NyuchiListView feeds.
No interactive demo is registered for this component yet — the source is shown directly.
"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
import { useNyuchiHarness } from "@/lib/harness"
/* ═══════════════════════════════════════════════════════════════
NYUCHI COMMUTE CARD — Brand Component (Pre-Wired)
Mineral: Gold (transport, movement).
Saved commute route with quick-action departure button.
✅ HARNESS ✅ TOKENS ✅ STRICT MINERAL RULES ✅ TOUCH 48px+
═══════════════════════════════════════════════════════════════ */
interface NyuchiCommuteCardProps {
label: string; origin: string; destination: string
mode?: "bus" | "kombi" | "taxi" | "walk" | "mixed"
estimatedDuration?: string; nextDeparture?: string
frequency?: string; onStart?: () => void; onClick?: () => void; className?: string
}
export function NyuchiCommuteCard({ loading = false, label, origin, destination, mode = "bus", estimatedDuration, nextDeparture, frequency, onStart, onClick, className }: NyuchiCommuteCardProps) {
const { log, motion, LiveRegion } = useNyuchiHarness("commute-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-commute-card" data-portal="https://design.nyuchi.com/components/nyuchi-commute-card" data-loading role="article" className="animate-pulse rounded-[var(--radius-lg,14px)] bg-card border-l-2 border-l-muted p-4 space-y-3"><div className="flex items-center gap-3"><div className="size-10 rounded-full bg-muted" /><div className="flex-1 space-y-1.5"><div className="h-3.5 w-1/3 rounded bg-muted" /><div className="h-2.5 w-2/3 rounded bg-muted" /></div></div></div>)
const icons = { bus: "🚌", kombi: "🚐", taxi: "🚕", walk: "🚶", mixed: "🔀" }
return (
<div data-slot="nyuchi-commute-card" role="article" onClick={onClick} className={cn("bg-card rounded-[var(--radius-lg,14px)] border border-border border-l-2 border-l-[var(--color-gold,#FFD740)] p-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary,#00B0FF)] min-h-[48px] transition-shadow hover:shadow-sm", onClick && "cursor-pointer", className)}>
<div className="flex items-center gap-3">
<div className="flex size-10 items-center justify-center rounded-full bg-[var(--color-gold,#FFD740)]/10 text-lg">{icons[mode]}</div>
<div className="flex-1 min-w-0">
<p className="text-sm font-semibold text-foreground" style={{ fontFamily: "var(--font-serif)" }}>{label}</p>
<p className="text-[11px] text-muted-foreground truncate">{origin} → {destination}</p>
</div>
{estimatedDuration && <div className="text-right"><p className="text-sm font-bold text-foreground">{estimatedDuration}</p><p className="text-[10px] text-muted-foreground">est.</p></div>}
</div>
<div className="mt-3 flex items-center justify-between">
<div className="flex items-center gap-3 text-[11px] text-muted-foreground">
{nextDeparture && <span>Next: {nextDeparture}</span>}
{frequency && <><span>·</span><span>{frequency}</span></>}
</div>
{onStart && <button onClick={e => { e.stopPropagation(); onStart() }} className="h-10 rounded-full bg-[var(--color-gold,#FFD740)] text-[#0A0A0A] px-4 text-[12px] font-medium transition-opacity hover:opacity-80">Go →</button>}
</div>
</div>
)
}
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/nyuchi-commute-cardnpx shadcn@latest add https://mzizi.dev/api/v1/ui/nyuchi-commute-card