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
App update / new version available prompt. Shows when a new version is detected via service worker. Dismissible with optional force-update for critical patches.
View the full component source code below.
"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
import { useNyuchiHarness } from "@/lib/harness"
interface NyuchiUpdatePromptProps {
visible?: boolean
version?: string
isCritical?: boolean
onUpdate?: () => void
onDismiss?: () => void
className?: string
}
export function NyuchiUpdatePrompt({ visible = false, version, isCritical = false, onUpdate, onDismiss, className }: NyuchiUpdatePromptProps) {
const { log, motion } = useNyuchiHarness("update-prompt")
const animStyle = React.useMemo(() => motion.prefersReduced ? {} : { animation: `nyuchi-fade-slide-up ${motion.enterDuration}ms ${motion.enterEasing} both` }, [motion])
React.useEffect(() => { if (visible) log.info(`update_prompt: v${version} critical=${isCritical}`) }, [visible, version, isCritical, log])
if (!visible) return null
return (
<div data-slot="nyuchi-update-prompt" data-portal="https://design.nyuchi.com/components/nyuchi-update-prompt"
role="alertdialog" aria-label="Update available" style={animStyle}
className={cn("fixed bottom-20 left-4 right-4 z-50 mx-auto max-w-sm rounded-[var(--radius-xl,17px)] bg-card p-4 shadow-2xl border border-border", className)}>
<p className="text-sm font-semibold">{isCritical ? "Critical update required" : "Update available"}</p>
<p className="mt-1 text-xs text-muted-foreground">{version ? `Version ${version} is ready.` : "A new version is ready."} {isCritical ? "This update is required to continue." : "Refresh to get the latest improvements."}</p>
<div className="mt-3 flex gap-2">
<button onClick={onUpdate} className="flex-1 min-h-[48px] rounded-full bg-primary text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">Update</button>
{!isCritical && onDismiss && <button onClick={onDismiss} className="min-h-[48px] rounded-full bg-muted px-4 text-sm font-medium text-foreground transition-colors hover:bg-muted/80">Later</button>}
</div>
</div>
)
}
export type { NyuchiUpdatePromptProps }
npx shadcn@latest add https://mzizi.dev/api/v1/ui/nyuchi-update-promptFetch this component's metadata and source code from the registry API.
/api/v1/ui/nyuchi-update-prompt