{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-27",
  "title": "Vote buttons",
  "description": "Upvote and downvote joined around a score.",
  "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-27.tsx",
      "content": "'use client';\n\nimport { useState } from 'react';\n\nimport { MotionNumber } from '@/components/core/motion-number';\nimport { ChevronDownIcon, ChevronUpIcon } from '@/registry/ndeko/lib/icons';\nimport { Button } from '@/registry/ndeko/ui/button';\n\nconst BASE_SCORE = 235;\n\nconst SEGMENT =\n  'rounded-none first:rounded-s-full last:rounded-e-full focus-visible:z-10 aria-pressed:text-primary-ink';\n\nconst COUNT_SEGMENT = [\n  'flex items-center px-3 text-[13px] font-medium tabular-nums',\n  'bg-card shadow-[0_1px_2px_rgb(0_0_0/0.05)] hairline-ring ring-foreground/12',\n  'dark:bg-foreground/[0.04] dark:ring-foreground/15',\n].join(' ');\n\ntype Vote = -1 | 0 | 1;\n\nfunction nextVoteOf(currentVote: Vote, castVote: Vote): Vote {\n  if (currentVote === castVote) {\n    return 0;\n  }\n  return castVote;\n}\n\nexport default function Button27() {\n  const [vote, setVote] = useState<Vote>(0);\n  const score = BASE_SCORE + vote;\n  const isUpvoted = vote === 1;\n  const isDownvoted = vote === -1;\n\n  function castVote(cast: Vote) {\n    const nextVote = nextVoteOf(vote, cast);\n    setVote(nextVote);\n  }\n\n  function upvote() {\n    castVote(1);\n  }\n\n  function downvote() {\n    castVote(-1);\n  }\n\n  return (\n    <div className='inline-flex -space-x-px'>\n      <Button\n        variant='outline'\n        size='icon'\n        aria-label='Upvote'\n        aria-pressed={isUpvoted}\n        onClick={upvote}\n        className={SEGMENT}\n      >\n        <ChevronUpIcon />\n      </Button>\n      <span className={COUNT_SEGMENT}>\n        <span className='flex' aria-hidden='true'>\n          <MotionNumber value={score} />\n        </span>\n        <span className='sr-only'>Score {score}</span>\n      </span>\n      <Button\n        variant='outline'\n        size='icon'\n        aria-label='Downvote'\n        aria-pressed={isDownvoted}\n        onClick={downvote}\n        className={SEGMENT}\n      >\n        <ChevronDownIcon />\n      </Button>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "components",
    "button"
  ],
  "type": "registry:component"
}