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.

import * as React from "react"
import { MailIcon, PhoneIcon, MapPinIcon } from "@/lib/icons"
import { cn } from "@/lib/utils"

interface ContactCardProps {
  name: string
  email?: string
  phone?: string
  address?: string
  avatar?: string
  role?: string
  className?: string
}

function ContactCard({ loading = false, name, email, phone, address, avatar, role, className }: ContactCardProps) {
  if (loading) return (<div data-slot="contact-card" data-portal="https://design.nyuchi.com/components/contact-card" data-loading className="animate-pulse rounded-[var(--radius-lg,14px)] bg-card p-4 ring-1 ring-foreground/10 space-y-3"><div className="h-4 w-2/3 rounded bg-muted" /><div className="h-3 w-full rounded bg-muted" /><div className="h-3 w-1/2 rounded bg-muted" /></div>)

  return (
    <div
      data-slot="contact-card"
      className={cn(
        "flex flex-col gap-4 rounded-[var(--radius-lg,14px)] bg-card p-6 text-sm text-card-foreground ring-1 ring-foreground/10",
        className
      )}
    >
      <div className="flex items-center gap-3">
        {avatar ? (
          <img src={avatar} alt={name} className="size-12 rounded-full object-cover" />
        ) : (
          <div className="flex size-12 items-center justify-center rounded-full bg-muted text-lg font-medium text-muted-foreground">
            {name.charAt(0).toUpperCase()}
          </div>
        )}
        <div className="flex flex-col">
          <span className="text-base font-medium">{name}</span>
          {role && <span className="text-xs text-muted-foreground">{role}</span>}
        </div>
      </div>
      <div className="flex flex-col gap-2">
        {email && (
          <a
            href={`mailto:${email}`}
            className="inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
          >
            <MailIcon className="size-4 shrink-0" />
            {email}
          </a>
        )}
        {phone && (
          <a
            href={`tel:${phone}`}
            className="inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
          >
            <PhoneIcon className="size-4 shrink-0" />
            {phone}
          </a>
        )}
        {address && (
          <span className="inline-flex items-center gap-2 text-sm text-muted-foreground">
            <MapPinIcon className="size-4 shrink-0" />
            {address}
          </span>
        )}
      </div>
    </div>
  )
}

export { ContactCard }
export type { ContactCardProps }

Source Code

View the full component source code below.

import * as React from "react"
import { MailIcon, PhoneIcon, MapPinIcon } from "@/lib/icons"
import { cn } from "@/lib/utils"

interface ContactCardProps {
  name: string
  email?: string
  phone?: string
  address?: string
  avatar?: string
  role?: string
  className?: string
}

function ContactCard({ loading = false, name, email, phone, address, avatar, role, className }: ContactCardProps) {
  if (loading) return (<div data-slot="contact-card" data-portal="https://design.nyuchi.com/components/contact-card" data-loading className="animate-pulse rounded-[var(--radius-lg,14px)] bg-card p-4 ring-1 ring-foreground/10 space-y-3"><div className="h-4 w-2/3 rounded bg-muted" /><div className="h-3 w-full rounded bg-muted" /><div className="h-3 w-1/2 rounded bg-muted" /></div>)

  return (
    <div
      data-slot="contact-card"
      className={cn(
        "flex flex-col gap-4 rounded-[var(--radius-lg,14px)] bg-card p-6 text-sm text-card-foreground ring-1 ring-foreground/10",
        className
      )}
    >
      <div className="flex items-center gap-3">
        {avatar ? (
          <img src={avatar} alt={name} className="size-12 rounded-full object-cover" />
        ) : (
          <div className="flex size-12 items-center justify-center rounded-full bg-muted text-lg font-medium text-muted-foreground">
            {name.charAt(0).toUpperCase()}
          </div>
        )}
        <div className="flex flex-col">
          <span className="text-base font-medium">{name}</span>
          {role && <span className="text-xs text-muted-foreground">{role}</span>}
        </div>
      </div>
      <div className="flex flex-col gap-2">
        {email && (
          <a
            href={`mailto:${email}`}
            className="inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
          >
            <MailIcon className="size-4 shrink-0" />
            {email}
          </a>
        )}
        {phone && (
          <a
            href={`tel:${phone}`}
            className="inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
          >
            <PhoneIcon className="size-4 shrink-0" />
            {phone}
          </a>
        )}
        {address && (
          <span className="inline-flex items-center gap-2 text-sm text-muted-foreground">
            <MapPinIcon className="size-4 shrink-0" />
            {address}
          </span>
        )}
      </div>
    </div>
  )
}

export { ContactCard }
export type { ContactCardProps }