{"name":"follower-list","title":"FollowerList","type":"registry:ui","files":[{"path":"src/components/ui/follower-list.tsx","type":"registry:ui","target":"@ui/follower-list.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"./lib/utils\";\n\nexport interface Follower {\n  id: string;\n  avatar: string;\n  name: string;\n  handle: string;\n}\n\nexport interface FollowerListProps {\n  followers: Follower[];\n}\n\nconst FollowButton: React.FC<{\n  isFollowing?: boolean;\n  onToggle?: (following: boolean) => void;\n}> = ({ isFollowing = false, onToggle }) => {\n  const [isActive, setIsActive] = React.useState(isFollowing);\n\n  const handleClick = () => {\n    setIsActive(!isActive);\n    onToggle?.(!isActive);\n  };\n\n  return (\n    <button\n      onClick={handleClick}\n      className={cn(\n        \"flex items-center gap-1 rounded-md border border-dashed border-border/30 px-2.5 py-1 text-[10px] mono uppercase text-muted-foreground\",\n        isActive && \"bg-accent text-accent-foreground\",\n        isActive && \"hover:bg-accent/90\"\n      )}\n    >\n      {isActive ? (\n        <>\n          FOLLOWING\n          <svg\n            className=\"w-3 h-3\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n          >\n            <path d=\"M20 6L9 17l-5-5\" />\n          </svg>\n        </>\n      ) : (\n        <>\n          FOLLOW\n          <svg\n            className=\"w-3 h-3\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth={2}\n          >\n            <path d=\"M6.8 2.5a2.2 2.2 0 0 1 2.1-.2h7.6a2.2 2.2 0 0 1 2.1 2.2v5.6a2.2 2.2 0 0 1-2.1 2.2H9.2a2.2 2.2 0 0 1-2.1-2.2V5.3a2.2 2.2 0 0 1 1.4-1.9z\" />\n            <line x1=\"10\" y1=\"7.5\" x2=\"15.5\" y2=\"7.5\" />\n          </svg>\n        </>\n      )}\n    </button>\n  );\n};\n\nconst FollowerList: React.FC<FollowerListProps> = ({ followers }) => {\n  return (\n    <div className=\"space-y-1\">\n      {followers.map((follower, idx) => (\n        <div\n          key={follower.id}\n          className={cn(\n            \"flex items-center gap-3 px-1 py-1 rounded-sm border border-border/30 motion-reduce:transition-none\",\n                        \"animate-[fade-in-up_0.3s_ease-out_both]\"\n          )}\n        >\n          <span\n            className={cn(\n              \"rounded-full bg-border/20 p-1 text-[10px] mono uppercase text-muted-foreground\",\n              \"w-6 h-6 flex-shrink-0\"\n            )}\n          >\n            {follower.avatar || \"U\"}\n          </span>\n          <div className=\"flex-1 min-w-0\">\n            <span className=\"font-mono uppercase text-foreground\">\n              {follower.name}\n            </span>\n            <span className=\"text-[10px] mono uppercase text-muted-foreground\">\n              {follower.handle}\n            </span>\n          </div>\n          <FollowButton\n            isFollowing={false}\n            onToggle={() => console.log(\"toggle\")}\n          />\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport { FollowerList };"}],"registryDependencies":["https://ui.bigbullapp.com/r/utils.json"]}