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.
View the full component source code below.
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 }
npx shadcn@latest add https://mzizi.dev/api/v1/ui/map-cardFetch this component's metadata and source code from the registry API.
/api/v1/ui/map-card