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 { Copy, Check } from "@/lib/icons"

import { cn } from "@/lib/utils"

interface DescriptionItem {
  term: string
  detail: React.ReactNode
  copyable?: boolean
}

function CopyableDetail({ detail }: { detail: React.ReactNode }) {
  const [copied, setCopied] = React.useState(false)

  function handleCopy() {
    const text = typeof detail === "string" ? detail : String(detail)
    navigator.clipboard.writeText(text)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  return (
    <span className="inline-flex items-center gap-1.5">
      {detail}
      <button
        type="button"
        onClick={handleCopy}
        className="shrink-0 p-0.5 text-muted-foreground transition-colors hover:text-foreground"
        aria-label="Copy value"
      >
        {copied ? (
          <Check className="size-3 text-[var(--status-success, var(--color-malachite, #64FFDA))]" />
        ) : (
          <Copy className="size-3" />
        )}
      </button>
    </span>
  )
}

function DescriptionList({ loading = false,
  items,
  className,
  ...props
}: {
  items: DescriptionItem[]
} & React.ComponentProps<"dl">) {
  return (
    <dl
      data-slot="description-list" data-portal="https://design.nyuchi.com/components/description-list"
      className={cn("grid grid-cols-1 gap-x-6 gap-y-3 sm:grid-cols-[auto_1fr]", className)}
      {...props}
    >
      {items.map((item) => (
        <React.Fragment key={item.term}>
          <dt className="text-sm font-medium text-muted-foreground">{item.term}</dt>
          <dd className="text-sm text-foreground">
            {item.copyable ? <CopyableDetail detail={item.detail} /> : item.detail}
          </dd>
        </React.Fragment>
      ))}
    </dl>
  )
}

export { DescriptionList, type DescriptionItem }

Source Code

View the full component source code below.

"use client"

import * as React from "react"
import { Copy, Check } from "@/lib/icons"

import { cn } from "@/lib/utils"

interface DescriptionItem {
  term: string
  detail: React.ReactNode
  copyable?: boolean
}

function CopyableDetail({ detail }: { detail: React.ReactNode }) {
  const [copied, setCopied] = React.useState(false)

  function handleCopy() {
    const text = typeof detail === "string" ? detail : String(detail)
    navigator.clipboard.writeText(text)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  return (
    <span className="inline-flex items-center gap-1.5">
      {detail}
      <button
        type="button"
        onClick={handleCopy}
        className="shrink-0 p-0.5 text-muted-foreground transition-colors hover:text-foreground"
        aria-label="Copy value"
      >
        {copied ? (
          <Check className="size-3 text-[var(--status-success, var(--color-malachite, #64FFDA))]" />
        ) : (
          <Copy className="size-3" />
        )}
      </button>
    </span>
  )
}

function DescriptionList({ loading = false,
  items,
  className,
  ...props
}: {
  items: DescriptionItem[]
} & React.ComponentProps<"dl">) {
  return (
    <dl
      data-slot="description-list" data-portal="https://design.nyuchi.com/components/description-list"
      className={cn("grid grid-cols-1 gap-x-6 gap-y-3 sm:grid-cols-[auto_1fr]", className)}
      {...props}
    >
      {items.map((item) => (
        <React.Fragment key={item.term}>
          <dt className="text-sm font-medium text-muted-foreground">{item.term}</dt>
          <dd className="text-sm text-foreground">
            {item.copyable ? <CopyableDetail detail={item.detail} /> : item.detail}
          </dd>
        </React.Fragment>
      ))}
    </dl>
  )
}

export { DescriptionList, type DescriptionItem }