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
Shows translation status and language of content. Indicates whether content is original, machine-translated, or community-translated. Links to Lingo for translation contribution. Used on articles, listings, and chat messages.
View the full component source code below.
import * as React from "react"
import { cn } from "@/lib/utils"
type TranslationStatus = "original" | "machine" | "community" | "verified"
interface TranslationIndicatorProps extends React.ComponentProps<"span"> {
/** Current language code (e.g., "sn", "nd", "en") */
language: string
/** Translation status */
status?: TranslationStatus
/** Language display name */
languageName?: string
}
const statusLabels: Record<TranslationStatus, string> = {
original: "Original",
machine: "Auto-translated",
community: "Community translated",
verified: "Verified translation",
}
const statusColors: Record<TranslationStatus, string> = {
original: "text-muted-foreground",
machine: "text-[var(--color-cobalt,#00B0FF)]",
community: "text-[var(--color-gold,#FFD740)]",
verified: "text-[var(--color-malachite,#64FFDA)]",
}
function TranslationIndicator({
language,
status = "original",
languageName,
loading = false, className,
...props
}: TranslationIndicatorProps) {
return (
<span
data-slot="translation-indicator" data-portal="https://design.nyuchi.com/components/translation-indicator" role="article"
className={cn(
"inline-flex items-center gap-1 text-xs",
statusColors[status],
className
)}
title={`${languageName || language} · ${statusLabels[status]}`}
{...props}
>
<span className="font-mono text-[10px] uppercase">{language}</span>
{status !== "original" && (
<span className="text-[10px]">· {statusLabels[status]}</span>
)}
</span>
)
}
export { TranslationIndicator }
export type { TranslationIndicatorProps, TranslationStatus }
npx shadcn@latest add https://mzizi.dev/api/v1/ui/translation-indicatorFetch this component's metadata and source code from the registry API.
/api/v1/ui/translation-indicator