{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible-3",
  "type": "registry:component",
  "title": "Collapsible 3",
  "description": "Collapsible 3. 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-3.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState } from 'react';\n\nimport { ChevronUpIcon } 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 Task = {\n  fallback: string;\n  image: string;\n  name: string;\n  progress: number;\n  role: string;\n};\n\nconst tasks: readonly Task[] = [\n  {\n    image: 'https://i.pravatar.cc/160?img=21',\n    fallback: 'MC',\n    name: 'Maya Chen',\n    role: 'Product Designer',\n    progress: 88,\n  },\n  {\n    image: 'https://i.pravatar.cc/160?img=32',\n    fallback: 'OS',\n    name: 'Owen Scott',\n    role: 'Frontend Engineer',\n    progress: 64,\n  },\n  {\n    image: 'https://i.pravatar.cc/160?img=30',\n    fallback: 'AL',\n    name: 'Amara Lewis',\n    role: 'Research Lead',\n    progress: 76,\n  },\n  {\n    image: 'https://i.pravatar.cc/160?img=47',\n    fallback: 'JP',\n    name: 'Jordan Price',\n    role: 'Operations Analyst',\n    progress: 29,\n  },\n] as const;\n\nconst Collapsible3 = () => {\n  const [open, setOpen] = useState<boolean>(false);\n  const visibleTasks = tasks.slice(0, 2);\n  const hiddenTasks = tasks.slice(2);\n\n  return (\n    <Collapsible\n      open={open}\n      onOpenChange={setOpen}\n      className=\"flex w-full max-w-[350px] flex-col items-start gap-4 p-4\"\n    >\n      <div className=\"font-medium\">Today&apos;s team progress</div>\n      <ul className=\"flex w-full flex-col gap-3\">\n        {visibleTasks.map((task) => (\n          <li\n            key={task.name}\n            className=\"border-border/60 flex items-start gap-4 rounded-md border px-3 py-2\"\n          >\n            <Avatar>\n              <AvatarImage src={task.image} alt={task.name} />\n              <AvatarFallback>{task.fallback}</AvatarFallback>\n            </Avatar>\n            <div className=\"flex flex-1 flex-col\">\n              <div className=\"text-sm font-medium\">{task.name}</div>\n              <p className=\"text-muted-foreground text-xs\">{task.role}</p>\n            </div>\n            <span className=\"text-muted-foreground text-sm\">{`${task.progress}%`}</span>\n          </li>\n        ))}\n        <CollapsibleContent className=\"flex flex-col gap-3\">\n          {hiddenTasks.map((task) => (\n            <li\n              key={task.name}\n              className=\"border-border/60 flex items-start gap-4 rounded-md border px-3 py-2\"\n            >\n              <Avatar>\n                <AvatarImage src={task.image} alt={task.name} />\n                <AvatarFallback>{task.fallback}</AvatarFallback>\n              </Avatar>\n              <div className=\"flex flex-1 flex-col\">\n                <div className=\"text-sm font-medium\">{task.name}</div>\n                <p className=\"text-muted-foreground text-xs\">{task.role}</p>\n              </div>\n              <span className=\"text-muted-foreground text-sm\">{`${task.progress}%`}</span>\n            </li>\n          ))}\n        </CollapsibleContent>\n      </ul>\n      <CollapsibleTrigger>\n        <Button variant=\"outline\" size=\"sm\" className=\"border-border/70\">\n          <span>{open ? 'Show less' : 'Show more'}</span>\n          <ChevronUpIcon\n            className={`size-4 transition-transform ${open ? '' : 'rotate-180'}`}\n          />\n        </Button>\n      </CollapsibleTrigger>\n    </Collapsible>\n  );\n};\n\nexport default Collapsible3;\n"
    }
  ]
}