{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-2",
  "type": "registry:component",
  "title": "Card 2",
  "description": "Card 2. A card is a container that displays content in a structured and visually appealing way.",
  "dependencies": [],
  "registryDependencies": [
    "avatar",
    "card",
    "tooltip"
  ],
  "files": [
    {
      "path": "components/watermelon/card-2.tsx",
      "type": "registry:component",
      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/components/base-ui/avatar';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/components/base-ui/card';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/components/base-ui/tooltip';\n\ntype Collaborator = {\n  fallback: string;\n  name: string;\n  src: string;\n};\n\ntype NoteCardContent = {\n  description: string;\n  items: readonly string[];\n  summary: string;\n  title: string;\n};\n\nconst collaborators: readonly Collaborator[] = [\n  {\n    src: 'https://i.pravatar.cc/160?img=28',\n    fallback: 'MC',\n    name: 'Maya Chen',\n  },\n  {\n    src: 'https://i.pravatar.cc/160?img=41',\n    fallback: 'NG',\n    name: 'Noah Grant',\n  },\n  {\n    src: 'https://i.pravatar.cc/160?img=60',\n    fallback: 'AL',\n    name: 'Amara Lewis',\n  },\n  {\n    src: 'https://i.pravatar.cc/160?img=66',\n    fallback: 'CP',\n    name: 'Clara Patel',\n  },\n] as const;\n\nconst noteCard: NoteCardContent = {\n  description: 'Key points from the weekly planning review.',\n  items: [\n    'Finalize onboarding checklist before Friday.',\n    'Reduce the number of steps in the setup flow.',\n    'Prepare a lighter mobile navigation pattern.',\n    'Share updated mockups with the product team.',\n    'Review launch risks in the Monday standup.',\n  ],\n  summary:\n    'The team aligned on simplification, mobile polish, and a tighter launch checklist.',\n  title: 'Planning Recap',\n};\n\nconst Card2 = () => {\n  return (\n    <Card className=\"border-border/70 max-w-md shadow-sm\">\n      <CardHeader className=\"space-y-1\">\n        <CardTitle>{noteCard.title}</CardTitle>\n        <CardDescription>{noteCard.description}</CardDescription>\n      </CardHeader>\n      <CardContent className=\"space-y-4 text-sm\">\n        <p className=\"text-muted-foreground leading-6\">{noteCard.summary}</p>\n        <ol className=\"text-foreground flex list-decimal flex-col gap-2 pl-5\">\n          {noteCard.items.map((item) => (\n            <li key={item}>{item}</li>\n          ))}\n        </ol>\n      </CardContent>\n      <CardFooter className=\"border-border/60 flex items-center justify-between gap-4 border-t pt-5\">\n        <span className=\"text-muted-foreground text-sm\">\n          Reviewed by the project team\n        </span>\n        <TooltipProvider>\n          <div className=\"flex -space-x-2\">\n            {collaborators.map((collaborator) => (\n              <Tooltip key={collaborator.name}>\n                <TooltipTrigger>\n                  <Avatar className=\"ring-background ring-2 transition-all duration-300 ease-in-out\">\n                    <AvatarImage\n                      src={collaborator.src}\n                      alt={collaborator.name}\n                    />\n                    <AvatarFallback className=\"text-xs\">\n                      {collaborator.fallback}\n                    </AvatarFallback>\n                  </Avatar>\n                </TooltipTrigger>\n                <TooltipContent className=\"px-2 py-1 text-xs\">\n                  {collaborator.name}\n                </TooltipContent>\n              </Tooltip>\n            ))}\n          </div>\n        </TooltipProvider>\n      </CardFooter>\n    </Card>\n  );\n};\n\nexport default Card2;\n"
    }
  ]
}