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
Currency pair display with live rate, conversion calculator, and trend indicator. Supports MXT ↔ fiat pairs across 42 African currencies. Used in Wallet swap interface and BushTrade cross-border commerce.
View the full component source code below.
"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
interface ExchangeRateProps extends React.ComponentProps<"div"> {
fromCurrency: string
toCurrency: string
rate: number
change24h?: number
lastUpdated?: Date | string
}
function ExchangeRate({
fromCurrency, toCurrency, rate, change24h, lastUpdated, loading = false, className, ...props
}: ExchangeRateProps) {
const isPositive = change24h !== undefined && change24h >= 0
return (
<div
data-slot="exchange-rate" data-portal="https://design.nyuchi.com/components/exchange-rate" role="article"
className={cn("flex items-center justify-between rounded-[var(--radius-lg,14px)] border border-border bg-card px-4 py-3", className)}
{...props}
>
<div className="flex items-center gap-2">
<span className="text-sm font-medium">{fromCurrency}</span>
<span className="text-muted-foreground">→</span>
<span className="text-sm font-medium">{toCurrency}</span>
</div>
<div className="text-right">
<div className="text-sm font-bold tabular-nums">{rate.toFixed(4)}</div>
{change24h !== undefined && (
<div className={cn(
"text-[10px] font-medium",
isPositive ? "text-[var(--color-malachite,#64FFDA)]" : "text-destructive"
)}>
{isPositive ? "+" : ""}{change24h.toFixed(2)}%
</div>
)}
</div>
</div>
)
}
export { ExchangeRate }
export type { ExchangeRateProps }
npx shadcn@latest add https://mzizi.dev/api/v1/ui/exchange-rateFetch this component's metadata and source code from the registry API.
/api/v1/ui/exchange-rate