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
Floating preview card that appears on map marker interaction. Shows a compact listing-card inside the map context with image, title, category, and action. Bridges the map view to the listing detail flow.
No interactive demo is registered for this component yet — the source is shown directly.
import * as React from "react"
import { cn } from "@/lib/utils"
interface MapCardProps extends React.ComponentProps<"div"> {
title: string
subtitle?: string
imageUrl?: string
category?: string
distance?: string
rating?: number
verified?: boolean
onTap?: () => void
}
function MapCard({
title, subtitle, imageUrl, category, distance, rating, verified, onTap, loading = false, className, ...props
}: MapCardProps) {
return (
<div
data-slot="map-card" data-portal="https://design.nyuchi.com/components/map-card"
className={cn(
"flex gap-3 rounded-[var(--radius-lg,14px)] border border-border bg-card p-3 shadow-md",
onTap && "cursor-pointer transition-colors hover:bg-muted/30",
className
)}
onClick={onTap}
role={onTap ? "button" : undefined}
tabIndex={onTap ? 0 : undefined}
{...props}
>
{imageUrl && (
<div className="size-14 shrink-0 overflow-hidden rounded-[var(--radius-sm,7px)] bg-muted">
<img src={imageUrl} alt={title} className="size-full object-cover" />
</div>
)}
<div className="min-w-0 flex-1">
<div className="flex items-center gap-1">
<span className="text-sm font-medium truncate">{title}</span>
{verified && <span className="text-[var(--color-gold,#FFD740)] text-xs">✓</span>}
</div>
{subtitle && <div className="text-xs text-muted-foreground truncate">{subtitle}</div>}
<div className="mt-1 flex items-center gap-2 text-[10px] text-muted-foreground">
{category && <span className="rounded-full bg-muted px-1.5 py-0.5 text-[9px]">{category}</span>}
{distance && <span>{distance}</span>}
{rating !== undefined && <span className="text-[var(--color-gold,#FFD740)]">★ {rating.toFixed(1)}</span>}
</div>
</div>
</div>
)
}
export { MapCard }
export type { MapCardProps }
The variants, sizes, and props surfaced by the registry. Each is sourced from the Supabase component_docs table.
Hit the registry API live and see the JSON the shadcn CLI consumes when it installs this component.
/api/v1/ui/map-cardnpx shadcn@latest add https://mzizi.dev/api/v1/ui/map-card