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
Circle/group info header with cover image, name, description, member count, privacy status, rules summary, and admin list. Used at the top of Circle detail pages and group settings. Maps to circles.circle table.
View the full component source code below.
import * as React from "react"
import { cn } from "@/lib/utils"
type CirclePrivacy = "public" | "private" | "secret"
interface GroupInfoCardProps extends React.ComponentProps<"div"> {
name: string
coverImage?: string
description?: string
memberCount: number
privacy?: CirclePrivacy
category?: string
adminNames?: string[]
rules?: string[]
onJoin?: () => void
isMember?: boolean
}
function GroupInfoCard({
name, coverImage, description, memberCount, privacy = "public",
category, adminNames, rules, onJoin, isMember, loading = false, className, ...props
}: GroupInfoCardProps) {
return (
<div
data-slot="group-info-card" data-portal="https://design.nyuchi.com/components/group-info-card" role="article"
className={cn("overflow-hidden rounded-[var(--radius-xl,17px)] border border-border bg-card", className)}
{...props}
>
{coverImage && (
<div className="h-24 bg-muted">
<img src={coverImage} alt="" className="size-full object-cover" />
</div>
)}
<div className="p-4">
<div className="flex items-start justify-between gap-2">
<div>
<h3 className="text-base font-semibold" style={{ fontFamily: "var(--font-serif, serif)" }}>{name}</h3>
<div className="mt-0.5 flex items-center gap-2 text-xs text-muted-foreground">
<span className="capitalize">{privacy}</span>
<span>·</span>
<span>{memberCount.toLocaleString()} members</span>
{category && <><span>·</span><span>{category}</span></>}
</div>
</div>
{onJoin && (
<button
onClick={onJoin}
className={cn(
"h-9 shrink-0 rounded-full px-4 text-xs font-medium",
isMember ? "border border-border text-muted-foreground" : "bg-primary text-primary-foreground"
)}
>
{isMember ? "Joined" : "Join"}
</button>
)}
</div>
{description && <p className="mt-2 text-xs text-muted-foreground line-clamp-3">{description}</p>}
{adminNames && adminNames.length > 0 && (
<div className="mt-3 text-[10px] text-muted-foreground">
Admins: {adminNames.join(", ")}
</div>
)}
</div>
</div>
)
}
export { GroupInfoCard }
export type { GroupInfoCardProps }
npx shadcn@latest add https://mzizi.dev/api/v1/ui/group-info-cardFetch this component's metadata and source code from the registry API.
/api/v1/ui/group-info-card