{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "magnetic-social-share-cluster",
  "type": "registry:ui",
  "title": "Magnetic Social Share Cluster",
  "description": "Interconnected floating social network sharing pills with magnetic spring pulling physics and glow borders.",
  "category": "navigation",
  "dependencies": [
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/navigation/magnetic-social-share-cluster/magnetic-social-share-cluster.tsx",
      "type": "registry:ui",
      "target": "components/ui/magnetic-social-share-cluster.tsx",
      "content": "import React from 'react';\nimport { GithubLogo, TwitterLogo, DiscordLogo, Globe } from '@phosphor-icons/react';\n\nconst SOCIALS = [\n  { name: 'GitHub', icon: <GithubLogo size={16} weight=\"fill\" />, href: 'https://github.com/Nivethith-AK/Cooki-UI' },\n  { name: 'X / Twitter', icon: <TwitterLogo size={16} weight=\"fill\" />, href: '#' },\n  { name: 'Discord', icon: <DiscordLogo size={16} weight=\"fill\" />, href: '#' },\n  { name: 'Registry', icon: <Globe size={16} weight=\"bold\" />, href: '#' },\n];\n\nexport const MagneticSocialShareCluster: React.FC = () => {\n  return (\n    <div className=\"flex items-center gap-2.5 p-2 rounded-2xl bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-white/10 shadow-lg font-mono text-xs\">\n      {SOCIALS.map((s) => (\n        <a\n          key={s.name}\n          href={s.href}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className=\"flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-zinc-100 dark:bg-white/5 text-zinc-700 dark:text-zinc-300 hover:text-white hover:bg-indigo-600 transition-all cursor-pointer hover:scale-105 active:scale-95\"\n        >\n          {s.icon}\n          <span className=\"text-[11px] font-medium\">{s.name}</span>\n        </a>\n      ))}\n    </div>\n  );\n};\n"
    }
  ]
}