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

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

function ApiKeyDisplay({ loading = false,
  apiKey,
  label,
  className,
  ...props
}: {
  apiKey: string
  label?: string
} & React.ComponentProps<"div">) {
  const [revealed, setRevealed] = React.useState(false)
  const [copied, setCopied] = React.useState(false)

  const masked = `${"•".repeat(Math.max(0, apiKey.length - 4))}${apiKey.slice(-4)}`

  function handleCopy() {
    navigator.clipboard.writeText(apiKey)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  return (
    <div data-slot="api-key-display" data-portal="https://design.nyuchi.com/components/api-key-display" className={cn("flex flex-col gap-1.5", className)} {...props}>
      {label && <span className="text-sm font-medium text-muted-foreground">{label}</span>}
      <div className="flex items-center gap-2 rounded-[var(--radius-lg,14px)] border border-border bg-muted px-3 py-2">
        <code className="flex-1 truncate font-mono text-sm select-all">
          {revealed ? apiKey : masked}
        </code>
        <button
          type="button"
          onClick={() => setRevealed((r) => !r)}
          className="shrink-0 rounded-[var(--radius-md,12px)] p-1 text-muted-foreground transition-colors hover:text-foreground"
          aria-label={revealed ? "Hide API key" : "Reveal API key"}
        >
          {revealed ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
        </button>
        <button
          type="button"
          onClick={handleCopy}
          className="shrink-0 rounded-[var(--radius-md,12px)] p-1 text-muted-foreground transition-colors hover:text-foreground"
          aria-label="Copy API key"
        >
          {copied ? (
            <Check className="size-4 text-[var(--status-success, var(--color-malachite, #64FFDA))]" />
          ) : (
            <Copy className="size-4" />
          )}
        </button>
      </div>
    </div>
  )
}

export { ApiKeyDisplay }

Source Code

View the full component source code below.

"use client"

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

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

function ApiKeyDisplay({ loading = false,
  apiKey,
  label,
  className,
  ...props
}: {
  apiKey: string
  label?: string
} & React.ComponentProps<"div">) {
  const [revealed, setRevealed] = React.useState(false)
  const [copied, setCopied] = React.useState(false)

  const masked = `${"•".repeat(Math.max(0, apiKey.length - 4))}${apiKey.slice(-4)}`

  function handleCopy() {
    navigator.clipboard.writeText(apiKey)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  return (
    <div data-slot="api-key-display" data-portal="https://design.nyuchi.com/components/api-key-display" className={cn("flex flex-col gap-1.5", className)} {...props}>
      {label && <span className="text-sm font-medium text-muted-foreground">{label}</span>}
      <div className="flex items-center gap-2 rounded-[var(--radius-lg,14px)] border border-border bg-muted px-3 py-2">
        <code className="flex-1 truncate font-mono text-sm select-all">
          {revealed ? apiKey : masked}
        </code>
        <button
          type="button"
          onClick={() => setRevealed((r) => !r)}
          className="shrink-0 rounded-[var(--radius-md,12px)] p-1 text-muted-foreground transition-colors hover:text-foreground"
          aria-label={revealed ? "Hide API key" : "Reveal API key"}
        >
          {revealed ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
        </button>
        <button
          type="button"
          onClick={handleCopy}
          className="shrink-0 rounded-[var(--radius-md,12px)] p-1 text-muted-foreground transition-colors hover:text-foreground"
          aria-label="Copy API key"
        >
          {copied ? (
            <Check className="size-4 text-[var(--status-success, var(--color-malachite, #64FFDA))]" />
          ) : (
            <Copy className="size-4" />
          )}
        </button>
      </div>
    </div>
  )
}

export { ApiKeyDisplay }