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
Map/navigation page. Full-screen map with search, pin details, route overlay, bottom sheet for location info. Competitors: Google Maps, Uber, Bolt.
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 MapPageProps { mapContent?: React.ReactNode; searchBar?: React.ReactNode; bottomSheet?: React.ReactNode; showMyLocation?: boolean; children?: React.ReactNode; loading?: boolean; className?: string }
export function MapPage({ mapContent, searchBar, bottomSheet, children, loading = false, className }: MapPageProps) {
const { log, motion, LiveRegion } = useNyuchiHarness("map-page")
if (loading) return <main data-slot="map-page" data-portal="https://design.nyuchi.com/components/map-page" data-loading role="main" className="relative h-screen animate-pulse"><div className="h-full bg-muted" /><div className="absolute top-4 left-4 right-4 h-12 rounded-full bg-card shadow" /></main>
return (
<main data-slot="map-page" role="main" aria-label="Map" className={cn("relative h-screen flex flex-col", className)}>
{searchBar && <div className="absolute top-4 left-4 right-4 z-10">{searchBar}</div>}
<div className="flex-1 relative">{mapContent || <div className="h-full bg-muted flex items-center justify-center text-muted-foreground text-sm">Map loads here</div>}{children}</div>
{bottomSheet && <div className="relative z-10">{bottomSheet}</div>}
</main>
)
}
export type { MapPageProps }npx shadcn@latest add https://mzizi.dev/api/v1/ui/map-pageFetch this component's metadata and source code from the registry API.
/api/v1/ui/map-page