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 job application status timeline showing application stages (applied, reviewed, interview, offer, rejected) with timestamps and employer feedback. Gold mineral accent. Used in Jobs dashboard.
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 APPLICATION TRACKER — Brand Component (Pre-Wired)
Mineral: Gold (employment, economics).
Application status timeline with stage progression.
✅ HARNESS ✅ TOKENS ✅ STRICT MINERAL RULES ✅ TOUCH 48px+
═══════════════════════════════════════════════════════════════ */
interface ApplicationStage { stage: "applied" | "reviewed" | "interview" | "offer" | "rejected" | "withdrawn"; date?: string; note?: string; active?: boolean }
interface NyuchiApplicationTrackerProps {
jobTitle: string; company: string; stages: ApplicationStage[]
currentStage?: string; onClick?: () => void; className?: string
}
const stageIcons = { applied: "📤", reviewed: "👀", interview: "🎙", offer: "🎉", rejected: "✕", withdrawn: "↩" } as const
export function NyuchiApplicationTracker({ loading = false, jobTitle, company, stages, currentStage, onClick, className }: NyuchiApplicationTrackerProps) {
const { log, motion, LiveRegion } = useNyuchiHarness("application-tracker")
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-application-tracker" data-portal="https://design.nyuchi.com/components/nyuchi-application-tracker" data-loading role="list" aria-label="Application stages" className="animate-pulse rounded-[var(--radius-lg,14px)] bg-card p-4 ring-1 ring-foreground/10 space-y-3"><div className="h-4 w-1/2 rounded bg-muted" />{Array.from({length:4}).map((_,i)=>(<div key={i} className="flex items-center gap-3"><div className="size-6 rounded-full bg-muted" /><div className="flex-1 h-3 rounded bg-muted" /></div>))}</div>)
return (
<div data-slot="nyuchi-application-tracker" role="list" tabIndex={0} className="focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary,#00B0FF)]" aria-label="Application stages" onClick={onClick} className={cn("bg-card rounded-[var(--radius-lg,14px)] border border-border p-4 space-y-3", onClick && "cursor-pointer", className)}>
<div><h3 className="text-sm font-semibold text-foreground" style={{ fontFamily: "var(--font-serif)" }}>{jobTitle}</h3><p className="text-[11px] text-muted-foreground">{company}</p></div>
<div className="space-y-0">{stages.map((s, i) => (
<div key={i} className="flex items-start gap-3 py-1.5">
<div className="flex flex-col items-center">
<div className={cn("size-6 rounded-full flex items-center justify-center text-[11px]",
s.stage === "rejected" || s.stage === "withdrawn" ? "bg-[var(--status-error,#FF5252)]/10 text-red-400" :
s.active ? "bg-[var(--color-gold,#FFD740)]/20 text-[var(--color-gold,#FFD740)]" :
s.date ? "bg-[var(--color-malachite,#64FFDA)]/20 text-[var(--color-malachite,#64FFDA)]" :
"bg-muted text-muted-foreground/40"
)}>{stageIcons[s.stage]}</div>
{i < stages.length - 1 && <div className="w-px flex-1 bg-border min-h-[12px]" />}
</div>
<div className="flex-1 min-w-0 pb-1"><p className={cn("text-xs capitalize", s.active ? "font-semibold text-foreground" : s.date ? "text-foreground" : "text-muted-foreground")}>{s.stage.replace("-"," ")}</p>{s.date && <p className="text-[10px] text-muted-foreground">{s.date}</p>}{s.note && <p className="text-[10px] text-muted-foreground mt-0.5 italic">{s.note}</p>}</div>
</div>
))}</div>
</div>
)
}
npx shadcn@latest add https://mzizi.dev/api/v1/ui/nyuchi-application-trackerFetch this component's metadata and source code from the registry API.
/api/v1/ui/nyuchi-application-tracker