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

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

function PaymentMethodCard({ loading = false,
  brand,
  lastFour,
  expiry,
  isDefault = false,
  onSetDefault,
  className,
  ...props
}: {
  brand: string
  lastFour: string
  expiry: string
  isDefault?: boolean
  onSetDefault?: () => void
} & React.ComponentProps<"div">) {
  if (loading) return (<div data-slot="payment-method-card" data-portal="https://design.nyuchi.com/components/payment-method-card" role="article" 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="payment-method-card" role="article"
      data-default={isDefault || undefined}
      className={cn(
        "flex items-center gap-4 rounded-[var(--radius-xl,17px)] bg-card p-4 ring-1 ring-foreground/10 transition-shadow",
        isDefault && "ring-2 ring-[var(--color-primary, var(--color-cobalt, #00B0FF))]/40",
        className
      )}
      {...props}
    >
      <div className="flex size-10 items-center justify-center rounded-[var(--radius-lg,14px)] bg-muted">
        <CreditCard className="size-5 text-muted-foreground" />
      </div>
      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
        <span className="text-sm font-medium text-foreground">{brand}</span>
        <span className="font-mono text-xs text-muted-foreground">
          {"•••• ".repeat(3)}
          {lastFour}
        </span>
      </div>
      <span className="text-xs text-muted-foreground tabular-nums">{expiry}</span>
      {isDefault ? (
        <span className="rounded-full bg-[var(--color-primary, var(--color-cobalt, #00B0FF))]/15 px-2 py-0.5 text-xs font-medium text-[var(--color-primary, var(--color-cobalt, #00B0FF))]">
          Default
        </span>
      ) : (
        onSetDefault && (
          <button
            type="button"
            onClick={onSetDefault}
            className="rounded-[var(--radius-lg,14px)] px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
          >
            Set default
          </button>
        )
      )}
    </div>
  )
}

export { PaymentMethodCard }

Source Code

View the full component source code below.

"use client"

import * as React from "react"
import { CreditCard } from "@/lib/icons"

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

function PaymentMethodCard({ loading = false,
  brand,
  lastFour,
  expiry,
  isDefault = false,
  onSetDefault,
  className,
  ...props
}: {
  brand: string
  lastFour: string
  expiry: string
  isDefault?: boolean
  onSetDefault?: () => void
} & React.ComponentProps<"div">) {
  if (loading) return (<div data-slot="payment-method-card" data-portal="https://design.nyuchi.com/components/payment-method-card" role="article" 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="payment-method-card" role="article"
      data-default={isDefault || undefined}
      className={cn(
        "flex items-center gap-4 rounded-[var(--radius-xl,17px)] bg-card p-4 ring-1 ring-foreground/10 transition-shadow",
        isDefault && "ring-2 ring-[var(--color-primary, var(--color-cobalt, #00B0FF))]/40",
        className
      )}
      {...props}
    >
      <div className="flex size-10 items-center justify-center rounded-[var(--radius-lg,14px)] bg-muted">
        <CreditCard className="size-5 text-muted-foreground" />
      </div>
      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
        <span className="text-sm font-medium text-foreground">{brand}</span>
        <span className="font-mono text-xs text-muted-foreground">
          {"•••• ".repeat(3)}
          {lastFour}
        </span>
      </div>
      <span className="text-xs text-muted-foreground tabular-nums">{expiry}</span>
      {isDefault ? (
        <span className="rounded-full bg-[var(--color-primary, var(--color-cobalt, #00B0FF))]/15 px-2 py-0.5 text-xs font-medium text-[var(--color-primary, var(--color-cobalt, #00B0FF))]">
          Default
        </span>
      ) : (
        onSetDefault && (
          <button
            type="button"
            onClick={onSetDefault}
            className="rounded-[var(--radius-lg,14px)] px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
          >
            Set default
          </button>
        )
      )}
    </div>
  )
}

export { PaymentMethodCard }