ExploreComponents 3D architecture Observability

DocumentationDocs home Installation CLI Theming API reference Contributing

DeveloperRegistry API OpenAPI MCP server

nyuchimzizi

Mzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Five African Minerals palette.

mukoko — consumermukoko.com weather news lingo nhimbe shamwari

nyuchi — enterprisenyuchi.com bushtrade

Built by Nyuchi Africav4.0.39

Source Code

View the full component source code below.

"use client"
import * as React from "react"
import { cn } from "@/lib/utils"

interface MemberRowProps {
  name: string
  subtitle?: string
  avatar?: string
  role?: string
  status?: "active" | "invited" | "suspended" | "offline"
  action?: React.ReactNode
  onClick?: () => void
  className?: string
}

export function MemberRow({ name, subtitle, avatar, role, status, action, onClick, className }: MemberRowProps) {
  const Comp = onClick ? "button" : "div"
  return (
    <Comp data-slot="member-row" data-portal="https://design.nyuchi.com/components/member-row" onClick={onClick}
      className={cn("flex w-full items-center justify-between px-4 py-3 text-left", onClick && "transition-colors hover:bg-muted cursor-pointer", className)}>
      <div className="flex items-center gap-3 min-w-0">
        <div className="size-9 shrink-0 rounded-full bg-muted overflow-hidden">
          {avatar && <img src={avatar} alt="" className="size-full object-cover" loading="lazy" />}
        </div>
        <div className="min-w-0">
          <p className="text-sm font-medium truncate">{name}</p>
          {subtitle && <p className="text-xs text-muted-foreground truncate">{subtitle}</p>}
        </div>
      </div>
      <div className="flex items-center gap-2 shrink-0">
        {role && <span className="rounded-full bg-muted px-2 py-0.5 text-xs">{role}</span>}
        {status === "invited" && <span className="text-xs text-[var(--status-warning,#FFD740)]">Pending</span>}
        {status === "suspended" && <span className="text-xs text-[var(--status-error,#FF5252)]">Suspended</span>}
        {action}
      </div>
    </Comp>
  )
}
export type { MemberRowProps }

Source Code

View the full component source code below.

"use client"
import * as React from "react"
import { cn } from "@/lib/utils"

interface MemberRowProps {
  name: string
  subtitle?: string
  avatar?: string
  role?: string
  status?: "active" | "invited" | "suspended" | "offline"
  action?: React.ReactNode
  onClick?: () => void
  className?: string
}

export function MemberRow({ name, subtitle, avatar, role, status, action, onClick, className }: MemberRowProps) {
  const Comp = onClick ? "button" : "div"
  return (
    <Comp data-slot="member-row" data-portal="https://design.nyuchi.com/components/member-row" onClick={onClick}
      className={cn("flex w-full items-center justify-between px-4 py-3 text-left", onClick && "transition-colors hover:bg-muted cursor-pointer", className)}>
      <div className="flex items-center gap-3 min-w-0">
        <div className="size-9 shrink-0 rounded-full bg-muted overflow-hidden">
          {avatar && <img src={avatar} alt="" className="size-full object-cover" loading="lazy" />}
        </div>
        <div className="min-w-0">
          <p className="text-sm font-medium truncate">{name}</p>
          {subtitle && <p className="text-xs text-muted-foreground truncate">{subtitle}</p>}
        </div>
      </div>
      <div className="flex items-center gap-2 shrink-0">
        {role && <span className="rounded-full bg-muted px-2 py-0.5 text-xs">{role}</span>}
        {status === "invited" && <span className="text-xs text-[var(--status-warning,#FFD740)]">Pending</span>}
        {status === "suspended" && <span className="text-xs text-[var(--status-error,#FF5252)]">Suspended</span>}
        {action}
      </div>
    </Comp>
  )
}
export type { MemberRowProps }