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
Social feed page. Infinite scroll content feed with stories/status bar, create post FAB, pull-to-refresh. Competitors: Instagram, TikTok, Twitter.
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 SocialFeedPageProps { stories?: React.ReactNode; createAction?: () => void; filters?: React.ReactNode; children?: React.ReactNode; loading?: boolean; className?: string }
export function SocialFeedPage({ stories, createAction, filters, children, loading = false, className }: SocialFeedPageProps) {
const { log, motion, LiveRegion } = useNyuchiHarness("social-feed-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="social-feed-page" data-portal="https://design.nyuchi.com/components/social-feed-page" data-loading role="main" className="p-4 space-y-4 animate-pulse"><div className="flex gap-3 overflow-hidden">{[1,2,3,4,5].map(i=><div key={i} className="size-16 shrink-0 rounded-full bg-muted" />)}</div>{[1,2,3].map(i=><div key={i} className="h-64 rounded-[var(--radius-lg,14px)] bg-muted" />)}</main>
return (
<main data-slot="social-feed-page" role="main" aria-label="Feed" style={animStyle} className={cn("flex flex-col", className)}>
{stories && <section aria-label="Stories" className="border-b border-border px-4 py-3">{stories}</section>}
{filters && <section aria-label="Feed filters" className="px-4 py-2 border-b border-border">{filters}</section>}
<section aria-label="Posts" className="flex flex-col gap-4 p-4">{children}</section>
{createAction && (
<button onClick={createAction} aria-label="Create post" className="fixed bottom-20 right-4 z-40 flex size-14 items-center justify-center rounded-full bg-primary text-white shadow-lg transition-transform hover:scale-105 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary,#00B0FF)]">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14M5 12h14" /></svg>
</button>
)}
</main>
)
}
export type { SocialFeedPageProps }npx shadcn@latest add https://mzizi.dev/api/v1/ui/social-feed-pageFetch this component's metadata and source code from the registry API.
/api/v1/ui/social-feed-page