{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-toggle-11","type":"registry:block","title":"Social media reaction toggles","description":"Social media reaction toggles","dependencies":[],"registryDependencies":["toggle"],"files":[{"path":"c-toggle-11.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Toggle } from \"@/components/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Pattern() {\n  const [liked, setLiked] = useState(false)\n  const [retweeted, setRetweeted] = useState(false)\n  const [shared, setShared] = useState(false)\n  const [bookmarked, setBookmarked] = useState(false)\n\n  return (\n    <div className=\"flex flex-wrap items-center justify-center gap-2\">\n      <Toggle\n        variant=\"outline\"\n        aria-label=\"Like\"\n        pressed={liked}\n        onPressedChange={setLiked}\n      >\n        <IconPlaceholder\n          lucide=\"HeartIcon\"\n          tabler=\"IconHeart\"\n          hugeicons=\"FavouriteIcon\"\n          phosphor=\"HeartIcon\"\n          remixicon=\"RiHeartLine\"\n        />\n        {liked ? 13 : 12}\n      </Toggle>\n      <Toggle\n        variant=\"outline\"\n        aria-label=\"Retweet\"\n        pressed={retweeted}\n        onPressedChange={setRetweeted}\n      >\n        <IconPlaceholder\n          lucide=\"Repeat2Icon\"\n          tabler=\"IconRepeat\"\n          hugeicons=\"RepeatIcon\"\n          phosphor=\"RepeatIcon\"\n          remixicon=\"RiRepeatLine\"\n        />\n        {retweeted ? 6 : 5}\n      </Toggle>\n      <Toggle\n        variant=\"outline\"\n        aria-label=\"Share\"\n        pressed={shared}\n        onPressedChange={setShared}\n      >\n        <IconPlaceholder\n          lucide=\"Share2Icon\"\n          tabler=\"IconShare\"\n          hugeicons=\"Share08Icon\"\n          phosphor=\"ShareNetworkIcon\"\n          remixicon=\"RiStackshareLine\"\n        />\n        {shared ? 4 : 3}\n      </Toggle>\n      <Toggle\n        variant=\"outline\"\n        aria-label=\"Bookmark\"\n        pressed={bookmarked}\n        onPressedChange={setBookmarked}\n      >\n        <IconPlaceholder\n          lucide=\"BookmarkIcon\"\n          tabler=\"IconBookmark\"\n          hugeicons=\"Bookmark02Icon\"\n          phosphor=\"BookmarkSimpleIcon\"\n          remixicon=\"RiBookmarkLine\"\n        />\n        {bookmarked ? 9 : 8}\n      </Toggle>\n    </div>\n  )\n}","target":"components/examples/c-toggle-11.tsx"}],"meta":{"order":11}}