{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "title": "Badge",
  "description": "Badge card component with locked/unlocked states that opens in a modal or bottom drawer.",
  "dependencies": [
    "@radix-ui/react-dialog",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/components/badge.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { X } from \"lucide-react\";\n\nconst STATIC_BASE =\n  \"https://s3.ap-south-1.amazonaws.com/static.masaischool.com\";\n\nconst LOCK_ICON_URL = `${STATIC_BASE}/lock.svg`;\nconst LINKEDIN_ICON_URL = `${STATIC_BASE}/linkedin.svg`;\n\nconst THEME_BACKGROUND_URL: Record<\"theme1\" | \"theme2\" | \"theme3\", string> = {\n  theme1: `${STATIC_BASE}/theme1-yellow.svg`,\n  theme2: `${STATIC_BASE}/theme2-blue.svg`,\n  theme3: `${STATIC_BASE}/theme3-red.svg`,\n};\n\n/** Header tint behind the decorative SVG; paired with `THEME_BACKGROUND_URL`. */\nconst THEME_BACKGROUND_COLOR: Record<\"theme1\" | \"theme2\" | \"theme3\", string> = {\n  theme1: \"#FFE8B526\",\n  theme2: \"#EDFAFA80\",\n  theme3: \"#F4AF7E1A\",\n};\n\ntype BadgeProps = {\n  name: string;\n  description: string;\n  lockedBadgeText?: string;\n  courseTitle?: string;\n  sectionModuleName?: string;\n  badgeUrl: string;\n  countLabel?: string;\n  isLocked: boolean;\n  openIn: \"bottom-drawer\" | \"modal\";\n  /** Decorative header background (SVG + tint); pick theme1, theme2, or theme3. */\n  theme: \"theme1\" | \"theme2\" | \"theme3\";\n  firstUnlockedDate: string | Date;\n};\n\nfunction formatUnlockedDate(value: string | Date) {\n  const date = value instanceof Date ? value : new Date(value);\n\n  if (Number.isNaN(date.getTime())) {\n    return String(value);\n  }\n\n  const day = date.getDate();\n  const mod100 = day % 100;\n  const suffix =\n    mod100 >= 11 && mod100 <= 13\n      ? \"th\"\n      : day % 10 === 1\n        ? \"st\"\n        : day % 10 === 2\n          ? \"nd\"\n          : day % 10 === 3\n            ? \"rd\"\n            : \"th\";\n  const month = new Intl.DateTimeFormat(\"en-GB\", { month: \"short\" }).format(\n    date,\n  );\n  const year = date.getFullYear();\n\n  return `${day}${suffix} ${month} ${year}`;\n}\n\nfunction Badge({\n  name,\n  description,\n  lockedBadgeText,\n  courseTitle,\n  sectionModuleName,\n  badgeUrl,\n  countLabel,\n  isLocked,\n  openIn,\n  theme,\n  firstUnlockedDate,\n}: BadgeProps) {\n  const unlockedText = formatUnlockedDate(firstUnlockedDate);\n  const drawer = openIn === \"bottom-drawer\";\n  const detailText = isLocked ? lockedBadgeText || description : description;\n  const themeBackgroundUrl = THEME_BACKGROUND_URL[theme];\n  const themeBackgroundColor = THEME_BACKGROUND_COLOR[theme];\n  const hasContextSection = Boolean(\n    (courseTitle && courseTitle.trim()) ||\n    (sectionModuleName && sectionModuleName.trim()),\n  );\n\n  const displayCountLabel = React.useMemo(() => {\n    if (!countLabel) return undefined;\n    const trimmed = countLabel.trim();\n    if (!trimmed) return undefined;\n    const numericPart = trimmed.toLowerCase().startsWith(\"x\")\n      ? trimmed.slice(1)\n      : trimmed;\n    const count = Number.parseInt(numericPart, 10);\n    if (!Number.isFinite(count) || count <= 1) return undefined;\n    return `x${count}`;\n  }, [countLabel]);\n  const linkedinShareHref = React.useMemo(() => {\n    const encoded = encodeURIComponent(badgeUrl);\n    return `https://www.linkedin.com/sharing/share-offsite/?url=${encoded}`;\n  }, [badgeUrl]);\n  const isRepeatedUnlock = React.useMemo(() => {\n    if (!displayCountLabel) return false;\n    const count = Number.parseInt(displayCountLabel.replace(/^x/i, \"\"), 10);\n    return Number.isFinite(count) && count > 2;\n  }, [displayCountLabel]);\n\n  return (\n    <Dialog.Root>\n      <Dialog.Trigger asChild>\n        <button\n          type=\"button\"\n          aria-label={`Open ${name} badge`}\n          className=\"relative inline-flex items-center justify-center rounded-xl outline-none ring-offset-background transition-transform hover:scale-[1.01] focus-visible:ring-2 focus-visible:ring-ring\"\n        >\n          <img\n            src={badgeUrl}\n            alt={name}\n            className={`h-24 w-24 object-contain transition-opacity ${isLocked ? \"opacity-40\" : \"\"}`}\n          />\n          {isLocked ? (\n            <span className=\"absolute bottom-[16px] right-[12px] inline-flex h-6 w-6 items-center justify-center rounded-full border border-[#C3DDFD] bg-[#3F83F8] shadow-md\">\n              <img\n                src={LOCK_ICON_URL}\n                alt=\"\"\n                className=\"size-3.5 object-contain\"\n              />\n              <span className=\"sr-only\">Locked</span>\n            </span>\n          ) : displayCountLabel ? (\n            <span\n              className=\"absolute bottom-[16px] right-[4px]  inline-flex items-center justify-center gap-2 rounded-[56px] border border-[#C3DDFD] bg-[#EBF5FF] px-[10px] py-1 text-[12px] font-semibold leading-4 text-[#3F83F8]\"\n              style={{\n                fontFamily:\n                  \"Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif\",\n              }}\n            >\n              {displayCountLabel}\n            </span>\n          ) : null}\n        </button>\n      </Dialog.Trigger>\n\n      <Dialog.Portal>\n        <Dialog.Overlay className=\"fixed inset-0 z-50 bg-black/40 data-[state=open]:animate-in data-[state=closed]:animate-out\" />\n        <Dialog.Content\n          className={`fixed z-50 border shadow-xl outline-none ${\n            drawer\n              ? \"inset-x-0 bottom-0 w-full max-h-[90vh] rounded-t-2xl bg-white data-[state=open]:animate-in data-[state=closed]:animate-out\"\n              : \"left-1/2 top-1/2 w-[min(92vw,524px)] -translate-x-1/2 -translate-y-1/2 rounded-2xl bg-white data-[state=open]:animate-in data-[state=closed]:animate-out\"\n          }`}\n        >\n          <div\n            className=\"relative overflow-hidden rounded-t-2xl pb-10 pt-4 sm:pt-5\"\n            style={{\n              backgroundColor: themeBackgroundColor,\n              borderBottomLeftRadius: \"50% 12%\",\n              borderBottomRightRadius: \"50% 12%\",\n            }}\n          >\n            <img\n              src={themeBackgroundUrl}\n              alt=\"\"\n              aria-hidden\n              className=\"pointer-events-none absolute inset-x-0 top-0 z-0 h-full w-full select-none object-cover object-top\"\n            />\n            <div className=\"relative z-10 px-4 sm:px-5\">\n              <Dialog.Close className=\"absolute right-3 top-3 z-20 inline-flex size-9 cursor-pointer items-center justify-center rounded-md border bg-white/95 text-foreground pointer-events-auto transition-colors hover:bg-white\">\n                <X className=\"size-4\" />\n                <span className=\"sr-only\">Close</span>\n              </Dialog.Close>\n\n              <div className=\"mx-auto mb-4 flex w-full max-w-[340px] justify-center\">\n                <div className=\"relative inline-flex\">\n                  <img\n                    src={badgeUrl}\n                    alt={name}\n                    className={`h-48 w-auto max-w-full object-contain transition-opacity`}\n                  />\n                  {isLocked ? (\n                    <span className=\"absolute bottom-3 left-1/2 z-10 inline-flex h-12 w-12 -translate-x-1/2 items-center justify-center rounded-full border border-[#C3DDFD] bg-[#3F83F8] shadow-md\">\n                      <img\n                        src={LOCK_ICON_URL}\n                        alt=\"\"\n                        width={32}\n                        height={32}\n                        className=\"h-8 w-8 shrink-0 object-contain\"\n                      />\n                      <span className=\"sr-only\">Locked</span>\n                    </span>\n                  ) : displayCountLabel ? (\n                    <span\n                      className=\"absolute bottom-5 right-10 z-10 inline-flex items-center justify-center gap-2 rounded-[56px] border border-[#C3DDFD] bg-[#EBF5FF] px-4 py-2 text-sm font-semibold leading-5 text-[#3F83F8]\"\n                      style={{\n                        fontFamily:\n                          \"Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif\",\n                      }}\n                    >\n                      {displayCountLabel}\n                    </span>\n                  ) : null}\n                </div>\n              </div>\n\n              <div className=\"space-y-2 text-center\">\n                <Dialog.Title className=\"text-3xl font-extrabold tracking-tight text-slate-900\">\n                  {name}\n                </Dialog.Title>\n                <Dialog.Description className=\"mx-auto max-w-[460px] text-lg leading-relaxed text-slate-600\">\n                  {detailText}\n                </Dialog.Description>\n              </div>\n\n              {!isLocked ? (\n                <div className=\"mt-5 flex flex-col items-center gap-3\">\n                  <p className=\"rounded-full border border-blue-300 bg-white/80 px-4 py-2 text-base font-medium text-blue-600\">\n                    {`${isRepeatedUnlock ? \"First unlocked on\" : \"Unlocked on\"} ${unlockedText}`}\n                  </p>\n                </div>\n              ) : null}\n            </div>\n          </div>\n          <div\n            className={`${drawer ? \"px-[16px]\" : \"px-[16px] sm:px-[72px]\"} pb-[24px] mt-[16px]`}\n          >\n            {hasContextSection ? (\n              <div className=\"mb-4 w-full rounded-[16px] bg-[#F9FAFB] p-3 text-center\">\n                {sectionModuleName ? (\n                  <p className=\"text-[12px] font-[500] leading-[18px] text-[#0694A2] border border-[#0694A2] w-fit px-[8px] py-[2px] rounded-[32px] mx-auto\">\n                    {sectionModuleName}\n                  </p>\n                ) : null}\n                {courseTitle ? (\n                  <p className=\"mt-2 text-[14px] font-[500] leading-[18px] text-[#374151]\">\n                    {courseTitle}\n                  </p>\n                ) : null}\n              </div>\n            ) : null}\n            {!isLocked ? (\n              <a\n                href={linkedinShareHref}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"inline-flex justify-center w-full\"\n              >\n                <span\n                  className={`cursor-pointer inline-flex items-center justify-center gap-3 rounded-2xl bg-[#6f67c7] py-3 text-[14px] font-[500] leading-[24px] text-white transition-colors hover:bg-[#625ab9] ${drawer ? \"px-4\" : \"px-4 sm:px-[72px]\"}`}\n                >\n                  <img\n                    src={LINKEDIN_ICON_URL}\n                    alt=\"\"\n                    className=\"h-6 w-6 object-contain\"\n                  />\n                  Share With Your Network\n                </span>\n              </a>\n            ) : null}\n          </div>\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n}\n\nexport { Badge };\nexport type { BadgeProps };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}