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
Content review item showing flagged content preview, report reason, reporter info, and approve/reject/escalate action buttons. Maps to system.content_moderation. Used in the Nyuchi Console moderation dashboard.
No interactive demo is registered for this component yet — the source is shown directly.
import * as React from "react"
import { cn } from "@/lib/utils"
type ReportReason = "spam" | "harassment" | "misinformation" | "inappropriate" | "copyright" | "other"
interface ModerationQueueItemProps extends React.ComponentProps<"div"> {
contentPreview: string
contentType: string
reporterName?: string
reason: ReportReason
reportedAt: string
reportCount?: number
onApprove?: () => void
onReject?: () => void
onEscalate?: () => void
}
function ModerationQueueItem({
contentPreview, contentType, reporterName, reason, reportedAt, reportCount = 1,
onApprove, onReject, onEscalate, loading = false, className, ...props
}: ModerationQueueItemProps) {
return (
<div data-slot="moderation-queue-item" data-portal="https://design.nyuchi.com/components/moderation-queue-item" role="article" className={cn("rounded-[var(--radius-lg,14px)] border border-border bg-card p-4", className)} {...props}>
<div className="flex items-start justify-between gap-2">
<div className="flex items-center gap-2">
<span className="rounded-full bg-destructive/10 px-2 py-0.5 text-[10px] font-medium capitalize text-destructive">{reason}</span>
<span className="text-[10px] text-muted-foreground">{contentType}</span>
{reportCount > 1 && <span className="text-[10px] font-medium text-[var(--color-terracotta,#D4A574)]">{reportCount} reports</span>}
</div>
<span className="text-[10px] text-muted-foreground">{reportedAt}</span>
</div>
<div className="mt-2 rounded-[var(--radius-md,12px)] bg-muted/30 p-3 text-sm line-clamp-3">{contentPreview}</div>
{reporterName && <div className="mt-1.5 text-[10px] text-muted-foreground">Reported by {reporterName}</div>}
<div className="mt-3 flex gap-2">
{onApprove && <button onClick={onApprove} className="h-9 flex-1 rounded-full bg-[var(--color-malachite,#64FFDA)]/15 text-xs font-medium text-[var(--color-malachite,#64FFDA)]">Approve</button>}
{onReject && <button onClick={onReject} className="h-9 flex-1 rounded-full bg-destructive/10 text-xs font-medium text-destructive">Reject</button>}
{onEscalate && <button onClick={onEscalate} className="h-9 rounded-full bg-[var(--color-gold,#FFD740)]/10 px-3 text-xs font-medium text-[var(--color-gold,#FFD740)]">Escalate</button>}
</div>
</div>
)
}
export { ModerationQueueItem }
export type { ModerationQueueItemProps }
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/moderation-queue-itemnpx shadcn@latest add https://mzizi.dev/api/v1/ui/moderation-queue-item