{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"cards-02","type":"registry:component","title":"Profile Cards","description":"Professional profile cards with cover images, avatars, status indicators, contact information, badges, and statistics. Features dropdown menus, action buttons, and responsive design. Perfect for team directories, user profiles, and contact management.","dependencies":["lucide-react"],"registryDependencies":["card","button","badge","avatar","separator","dropdown-menu"],"files":[{"path":"src/registry/blocks/application/data-display/cards/cards-02.tsx","content":"\"use client\";\n\nimport {\n  Calendar,\n  Mail,\n  MapPin,\n  MessageCircle,\n  MoreVertical,\n  Phone,\n  Settings,\n  UserPlus,\n} from \"lucide-react\";\nimport Image from \"next/image\";\n\nimport { cn } from \"@/registry/lib/utils\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/registry/ui/avatar\";\nimport { Badge } from \"@/registry/ui/badge\";\nimport { Button } from \"@/registry/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/ui/card\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/ui/dropdown-menu\";\nimport { Separator } from \"@/registry/ui/separator\";\n\nexport interface Cards02Props {\n  className?: string;\n}\n\nconst content = {\n  profiles: [\n    {\n      id: 1,\n      name: \"Sarah Johnson\",\n      role: \"Senior Product Manager\",\n      company: \"TechCorp Inc.\",\n      avatar: \"https://randomuser.me/api/portraits/women/1.jpg\",\n      coverImage: \"/placeholder.svg?height=120&width=400\",\n      location: \"San Francisco, CA\",\n      joinDate: \"Joined March 2022\",\n      email: \"sarah.johnson@techcorp.com\",\n      phone: \"+1 (555) 123-4567\",\n      status: \"online\" as const,\n      badges: [\"Team Lead\", \"Pro User\"],\n      stats: [\n        { label: \"Projects\", value: \"24\" },\n        { label: \"Followers\", value: \"1.2k\" },\n        { label: \"Following\", value: \"892\" },\n      ],\n    },\n    {\n      id: 2,\n      name: \"Michael Chen\",\n      role: \"Full Stack Developer\",\n      company: \"StartupFlow\",\n      avatar: \"https://randomuser.me/api/portraits/men/1.jpg\",\n      coverImage: \"/placeholder.svg?height=120&width=400\",\n      location: \"New York, NY\",\n      joinDate: \"Joined January 2023\",\n      email: \"michael.chen@startupflow.com\",\n      phone: \"+1 (555) 987-6543\",\n      status: \"away\" as const,\n      badges: [\"Developer\", \"Mentor\"],\n      stats: [\n        { label: \"Commits\", value: \"1.8k\" },\n        { label: \"Reviews\", value: \"456\" },\n        { label: \"Stars\", value: \"2.1k\" },\n      ],\n    },\n  ],\n};\n\nexport function Cards02({ className }: Cards02Props) {\n  const getStatusColor = (status: string) => {\n    switch (status) {\n      case \"online\":\n        return \"bg-green-500\";\n      case \"away\":\n        return \"bg-yellow-500\";\n      case \"busy\":\n        return \"bg-red-500\";\n      default:\n        return \"bg-gray-500\";\n    }\n  };\n\n  const getInitials = (name: string) => {\n    return name\n      .split(\" \")\n      .map((n) => n[0])\n      .join(\"\")\n      .toUpperCase();\n  };\n\n  const handleMessage = (profile: (typeof content.profiles)[0]) => {\n    console.log(\"Message sent to:\", profile.name);\n  };\n\n  const handleFollow = (profile: (typeof content.profiles)[0]) => {\n    console.log(\"Following:\", profile.name);\n  };\n\n  const handleDropdownAction = (\n    action: string,\n    profile: (typeof content.profiles)[0],\n  ) => {\n    console.log(`${action} action for:`, profile.name);\n  };\n\n  return (\n    <div\n      className={cn(\n        \"grid grid-cols-1 lg:grid-cols-2 gap-6 w-full max-w-3xl mx-auto\",\n        className,\n      )}\n      data-testid=\"profile-cards-grid\"\n    >\n      {content.profiles.map((profile) => (\n        <Card\n          key={profile.id}\n          className=\"overflow-hidden hover:shadow-lg transition-shadow pt-0 gap-2\"\n          data-testid={`profile-card-${profile.id}`}\n        >\n          <div className=\"relative h-24 sm:h-32 bg-gradient-to-r from-blue-500 to-purple-600\">\n            <Image\n              src={profile.coverImage}\n              alt=\"Cover\"\n              fill\n              className=\"object-cover opacity-80\"\n            />\n            <div className=\"absolute top-3 right-3\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button\n                    variant=\"secondary\"\n                    size=\"icon\"\n                    className=\"h-8 w-8 bg-white/90 hover:bg-white\"\n                    data-testid={`profile-menu-${profile.id}`}\n                  >\n                    <MoreVertical className=\"h-4 w-4\" />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"end\"\n                  data-testid={`profile-menu-content-${profile.id}`}\n                >\n                  <DropdownMenuItem\n                    onClick={() => handleDropdownAction(\"edit\", profile)}\n                    data-testid={`edit-profile-${profile.id}`}\n                  >\n                    <Settings className=\"h-4 w-4 mr-2\" />\n                    Edit Profile\n                  </DropdownMenuItem>\n                  <DropdownMenuItem\n                    onClick={() => handleDropdownAction(\"message\", profile)}\n                    data-testid={`send-message-${profile.id}`}\n                  >\n                    <MessageCircle className=\"h-4 w-4 mr-2\" />\n                    Send Message\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem\n                    onClick={() => handleDropdownAction(\"view\", profile)}\n                    data-testid={`view-profile-${profile.id}`}\n                  >\n                    View Full Profile\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </div>\n          </div>\n\n          <CardHeader className=\"relative pb-4\">\n            <div className=\"absolute -top-10 left-6\">\n              <div className=\"relative\">\n                <Avatar className=\"h-16 w-16 border-4 border-background\">\n                  <AvatarImage src={profile.avatar} alt={profile.name} />\n                  <AvatarFallback className=\"text-lg\">\n                    {getInitials(profile.name)}\n                  </AvatarFallback>\n                </Avatar>\n                <div\n                  className={cn(\n                    \"absolute -bottom-1 -right-1 h-4 w-4 rounded-full border-2 border-background\",\n                    getStatusColor(profile.status),\n                  )}\n                  data-testid={`status-indicator-${profile.id}`}\n                />\n              </div>\n            </div>\n\n            <div className=\"pt-8 space-y-2\">\n              <div className=\"flex items-start justify-between\">\n                <div>\n                  <CardTitle className=\"text-lg sm:text-xl\">\n                    {profile.name}\n                  </CardTitle>\n                  <CardDescription className=\"text-sm\">\n                    {profile.role} at {profile.company}\n                  </CardDescription>\n                </div>\n              </div>\n\n              <div className=\"flex flex-wrap gap-1\">\n                {profile.badges.map((badge) => (\n                  <Badge\n                    key={badge}\n                    variant=\"secondary\"\n                    className=\"text-xs\"\n                    data-testid={`badge-${badge.toLowerCase().replace(/\\s+/g, \"-\")}`}\n                  >\n                    {badge}\n                  </Badge>\n                ))}\n              </div>\n            </div>\n          </CardHeader>\n\n          <CardContent className=\"space-y-4\">\n            <div className=\"space-y-2 text-sm\">\n              <div className=\"flex items-center space-x-2 text-muted-foreground\">\n                <MapPin className=\"h-4 w-4\" />\n                <span>{profile.location}</span>\n              </div>\n              <div className=\"flex items-center space-x-2 text-muted-foreground\">\n                <Calendar className=\"h-4 w-4\" />\n                <span>{profile.joinDate}</span>\n              </div>\n              <div className=\"flex items-center space-x-2 text-muted-foreground\">\n                <Mail className=\"h-4 w-4\" />\n                <span className=\"truncate\">{profile.email}</span>\n              </div>\n              <div className=\"flex items-center space-x-2 text-muted-foreground\">\n                <Phone className=\"h-4 w-4\" />\n                <span>{profile.phone}</span>\n              </div>\n            </div>\n\n            <Separator />\n\n            <div className=\"grid grid-cols-3 gap-4 text-center\">\n              {profile.stats.map((stat) => (\n                <div\n                  key={stat.label}\n                  data-testid={`stat-${stat.label.toLowerCase()}`}\n                >\n                  <div className=\"text-lg sm:text-xl font-bold\">\n                    {stat.value}\n                  </div>\n                  <div className=\"text-xs text-muted-foreground\">\n                    {stat.label}\n                  </div>\n                </div>\n              ))}\n            </div>\n\n            <div className=\"flex space-x-2 pt-2\">\n              <Button\n                className=\"flex-1\"\n                size=\"sm\"\n                onClick={() => handleMessage(profile)}\n                data-testid={`message-button-${profile.id}`}\n              >\n                <MessageCircle className=\"h-4 w-4 mr-2\" />\n                Message\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"flex-1 bg-transparent\"\n                size=\"sm\"\n                onClick={() => handleFollow(profile)}\n                data-testid={`follow-button-${profile.id}`}\n              >\n                <UserPlus className=\"h-4 w-4 mr-2\" />\n                Follow\n              </Button>\n            </div>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  );\n}\n","type":"registry:component"},{"path":"src/registry/lib/utils.ts","content":"import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","type":"registry:lib"}]}