{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible-4",
  "type": "registry:component",
  "title": "Collapsible 4",
  "description": "Collapsible 4. A collapsible is a component that allows users to show or hide content.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "avatar",
    "button",
    "collapsible"
  ],
  "files": [
    {
      "path": "components/watermelon/collapsible-4.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState } from 'react';\n\nimport type { LucideIcon } from 'lucide-react';\nimport {\n  ChevronRightIcon,\n  PanelsTopLeftIcon,\n  PlusIcon,\n  UserIcon,\n} from 'lucide-react';\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/components/base-ui/avatar';\nimport { Button } from '@/components/base-ui/button';\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/components/base-ui/collapsible';\n\ntype UserProfile = {\n  avatarAlt: string;\n  avatarSrc: string;\n  bio: string;\n  fallback: string;\n  followers: number;\n  followed?: boolean;\n  name: string;\n  projects: number;\n};\n\nconst users: readonly UserProfile[] = [\n  {\n    avatarAlt: 'Maya Chen',\n    avatarSrc: 'https://i.pravatar.cc/160?img=21',\n    bio: 'Product designer focused on onboarding flows, product storytelling, and clean interface systems.',\n    fallback: 'MC',\n    followers: 142,\n    name: 'Maya Chen',\n    projects: 6,\n  },\n  {\n    avatarAlt: 'Owen Scott',\n    avatarSrc: 'https://i.pravatar.cc/160?img=32',\n    bio: 'Frontend engineer building flexible React systems with a focus on performance and implementation detail.',\n    fallback: 'OS',\n    followers: 108,\n    followed: true,\n    name: 'Owen Scott',\n    projects: 4,\n  },\n  {\n    avatarAlt: 'Amara Lewis',\n    avatarSrc: 'https://i.pravatar.cc/160?img=30',\n    bio: 'Research lead translating user patterns into practical design decisions for product and brand teams.',\n    fallback: 'AL',\n    followers: 91,\n    name: 'Amara Lewis',\n    projects: 5,\n  },\n] as const;\n\ntype Metric = {\n  icon: LucideIcon;\n  value: number;\n};\n\ntype UserRowProps = {\n  user: UserProfile;\n};\n\nconst UserRow = ({ user }: UserRowProps) => {\n  const [open, setOpen] = useState<boolean>(false);\n  const metrics: readonly Metric[] = [\n    { icon: UserIcon, value: user.followers },\n    { icon: PanelsTopLeftIcon, value: user.projects },\n  ] as const;\n\n  return (\n    <Collapsible\n      open={open}\n      onOpenChange={setOpen}\n      className=\"p-3\"\n    >\n      <CollapsibleTrigger className=\"flex w-full items-center justify-between gap-4\">\n        <div className=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage src={user.avatarSrc} alt={user.avatarAlt} />\n            <AvatarFallback>{user.fallback}</AvatarFallback>\n          </Avatar>\n          <span className=\"font-medium\">{user.name}</span>\n        </div>\n        <ChevronRightIcon\n          className={`size-4 transition-transform ${open ? 'rotate-90' : ''}`}\n        />\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"pt-3\">\n        <div className=\"flex flex-col gap-3\">\n          <p className=\"text-muted-foreground text-sm\">{user.bio}</p>\n          <div className=\"flex items-center justify-between gap-2\">\n            <div className=\"flex items-center gap-4\">\n              {metrics.map((metric) => {\n                const Icon = metric.icon;\n                const metricKey = `${user.name}-${metric.value}-${Icon.name}`;\n\n                return (\n                  <span key={metricKey} className=\"flex items-center gap-2\">\n                    <Icon className=\"text-muted-foreground size-4\" />\n                    <span className=\"text-sm\">{metric.value}</span>\n                  </span>\n                );\n              })}\n            </div>\n            {user.followed ? (\n              <Button\n                variant=\"outline\"\n                className=\"h-7 rounded-md px-3 py-1 text-xs\"\n              >\n                Following\n              </Button>\n            ) : (\n              <Button className=\"h-7 rounded-md bg-sky-600 px-3 py-1 text-xs text-white hover:bg-sky-700 dark:bg-sky-500 dark:hover:bg-sky-400\">\n                Follow\n                <PlusIcon className=\"size-3.5\" />\n              </Button>\n            )}\n          </div>\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n};\n\nconst Collapsible4 = () => {\n  return (\n    <ul className=\"flex w-full max-w-[350px] flex-col gap-2.5\">\n      {users.map((user) => (\n        <li key={user.name}>\n          <UserRow user={user} />\n        </li>\n      ))}\n    </ul>\n  );\n};\n\nexport default Collapsible4;\n"
    }
  ]
}