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
Article/news reading page. Hero image, headline, author, read time, content body, source badge, related articles. Competitors: Medium, BBC, Al Jazeera.
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 ArticlePageProps { title?: string; author?: { name: string; avatar?: string }; publishedAt?: string; readTime?: string; heroImage?: string; source?: { name: string; credibility?: string }; children?: React.ReactNode; loading?: boolean; className?: string }
export function ArticlePage({ title, author, publishedAt, readTime, heroImage, source, children, loading = false, className }: ArticlePageProps) {
const { log, motion, LiveRegion } = useNyuchiHarness("article-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="article-page" data-portal="https://design.nyuchi.com/components/article-page" data-loading role="main" className="animate-pulse"><div className="aspect-[2/1] bg-muted" /><div className="p-4 space-y-3"><div className="h-8 w-3/4 rounded bg-muted" /><div className="h-4 w-1/2 rounded bg-muted" /><div className="h-64 rounded bg-muted" /></div></main>
return (
<article data-slot="article-page" role="article" style={animStyle} className={cn("flex flex-col max-w-3xl mx-auto", className)}>
{heroImage && <img src={heroImage} alt="" className="aspect-[2/1] object-cover w-full" />}
<div className="px-4 py-6">
{title && <h1 className="text-2xl font-bold leading-tight sm:text-3xl">{title}</h1>}
<div className="mt-3 flex items-center gap-3 text-sm text-muted-foreground">
{author && <div className="flex items-center gap-2">{author.avatar && <div className="size-6 rounded-full overflow-hidden bg-muted"><img src={author.avatar} alt="" className="size-full object-cover" /></div>}<span className="font-medium text-foreground">{author.name}</span></div>}
{publishedAt && <time>{publishedAt}</time>}
{readTime && <span>{readTime}</span>}
{source && <span className="rounded-full bg-muted px-2 py-0.5 text-xs">{source.name}</span>}
</div>
<div className="mt-6 prose prose-sm max-w-none text-foreground">{children}</div>
</div>
</article>
)
}
export type { ArticlePageProps }npx shadcn@latest add https://mzizi.dev/api/v1/ui/article-pageFetch this component's metadata and source code from the registry API.
/api/v1/ui/article-page