{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-62",
  "title": "Watch with rolling digits",
  "description": "Only the digits that change roll, in the direction of the change, when the watch count goes up or down.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/button.json",
    "https://ui.ndekocode.dev/r/icons.json",
    "https://ui.ndekocode.dev/r/motion-number.json",
    "https://ui.ndekocode.dev/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/components/button/button-62.tsx",
      "content": "'use client';\n\nimport { useState } from 'react';\n\nimport { MotionNumber } from '@/components/core/motion-number';\nimport { EyeIcon } from '@/registry/ndeko/lib/icons';\nimport { Button } from '@/registry/ndeko/ui/button';\n\nconst BASE_WATCHERS = 1099;\n\nfunction watchersLabelOf(count: number) {\n  const formatted = count.toLocaleString('en-US');\n  if (count === 1) {\n    return '1 person watching';\n  }\n  return `${formatted} people watching`;\n}\n\nexport default function Button62() {\n  const [isWatching, setIsWatching] = useState(false);\n  const ownWatch = Number(isWatching);\n  const watcherCount = BASE_WATCHERS + ownWatch;\n\n  function toggleWatch() {\n    setIsWatching((current) => !current);\n  }\n\n  return (\n    <Button\n      variant='outline'\n      className='py-0 pe-0'\n      aria-pressed={isWatching}\n      onClick={toggleWatch}\n    >\n      <EyeIcon className='group-aria-pressed/button:text-primary-ink opacity-60 transition-[opacity,color] duration-150 group-aria-pressed/button:opacity-100' />\n      Watch\n      <span className='hairline-l border-foreground/12 text-muted-foreground dark:border-foreground/15 ms-1 inline-flex h-full items-center px-3 text-xs font-medium tabular-nums'>\n        <span className='flex' aria-hidden='true'>\n          <MotionNumber value={watcherCount} locale='en-US' />\n        </span>\n        <span className='sr-only'>{watchersLabelOf(watcherCount)}</span>\n      </span>\n    </Button>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "components",
    "button"
  ],
  "type": "registry:component"
}