{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bank-badge",
  "type": "registry:ui",
  "title": "BankBadge",
  "description": "نام و لوگوی بانک داخل فیلد؛ نام با id به فیلد متصل می‌شود و لوگو تزئینی است",
  "dependencies": [
    "@kashi-ui/bank-logos@^1.7.0",
    "@kashi-ui/persian@^1.7.0"
  ],
  "registryDependencies": [
    "https://kashi.sepantapouya.com/r/cx.json",
    "https://kashi.sepantapouya.com/r/kashi-provider.json"
  ],
  "files": [
    {
      "path": "registry/kashi/BankBadge.tsx",
      "type": "registry:ui",
      "target": "components/kashi/BankBadge.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport type { Bank } from \"@kashi-ui/persian\";\nimport { bankName } from \"@kashi-ui/persian\";\nimport { useKashi } from \"./KashiProvider\";\n\n/** لوگوی بانک را فقط هنگام نیاز بارگذاری می‌کند (code-split)، تا حجم اولیهٔ برنامه زیاد نشود */\nexport function useBankLogo(slug: string | undefined, enabled: boolean): string | null {\n  const [uri, setUri] = useState<string | null>(null);\n  useEffect(() => {\n    if (!slug || !enabled) {\n      setUri(null);\n      return;\n    }\n    let alive = true;\n    import(\"@kashi-ui/bank-logos\")\n      .then((m) => alive && setUri(m.bankLogoDataUri(slug)))\n      .catch(() => alive && setUri(null));\n    return () => {\n      alive = false;\n    };\n  }, [slug, enabled]);\n  return uri;\n}\n\n/** نام و لوگوی بانک داخل فیلد؛ نام با id به فیلد متصل می‌شود و لوگو تزئینی است */\nexport function BankBadge({ bank, id, showLogo }: { bank: Bank | null; id: string; showLogo: boolean }) {\n  const { locale } = useKashi();\n  const logo = useBankLogo(bank?.slug, showLogo);\n  if (!bank) return null;\n  return (\n    <span className=\"k-bank\" id={id}>\n      {logo && <img className=\"k-bank__logo\" src={logo} alt=\"\" width={24} height={24} />}\n      {bankName(bank, locale)}\n    </span>\n  );\n}\n"
    }
  ]
}