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
Learning/education page. Course content, lesson progress, quiz area, notes. Competitors: Duolingo, Coursera, Khan Academy.
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 LearningPageProps { courseName?: string; progress?: number; lessonTitle?: string; sidebar?: React.ReactNode; children?: React.ReactNode; loading?: boolean; className?: string }
export function LearningPage({ courseName, progress, lessonTitle, sidebar, children, loading = false, className }: LearningPageProps) {
const { log, motion, LiveRegion } = useNyuchiHarness("learning-page")
const animStyle = React.useMemo(() => motion.prefersReduced ? {} : { animation: `nyuchi-fade-slide-up ${motion.enterDuration}ms ${motion.enterEasing} both` }, [motion])
if (loading) return <main data-slot="learning-page" data-portal="https://design.nyuchi.com/components/learning-page" data-loading role="main" className="p-4 space-y-4 animate-pulse"><div className="h-6 w-1/3 rounded bg-muted" /><div className="h-2 rounded-full bg-muted" /><div className="h-64 rounded-[var(--radius-lg,14px)] bg-muted" /></main>
return (
<main data-slot="learning-page" role="main" aria-label={courseName || "Learning"} style={animStyle} className={cn("flex flex-col lg:flex-row", className)}>
{sidebar && <aside className="w-full lg:w-72 border-r border-border p-4 lg:h-screen lg:overflow-y-auto">{sidebar}</aside>}
<div className="flex-1 p-4">
{courseName && <p className="text-sm text-muted-foreground">{courseName}</p>}
{progress != null && <div className="mt-1 h-1.5 rounded-full bg-muted overflow-hidden"><div className="h-full rounded-full bg-primary transition-all" style={{ width: `${progress}%` }} /></div>}
{lessonTitle && <h1 className="mt-4 text-xl font-bold">{lessonTitle}</h1>}
<div className="mt-6">{children}</div>
</div>
</main>
)
}
export type { LearningPageProps }npx shadcn@latest add https://mzizi.dev/api/v1/ui/learning-pageFetch this component's metadata and source code from the registry API.
/api/v1/ui/learning-page