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