{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"cards-05","type":"registry:component","title":"Notifications Card","description":"Notifications card with alert system, read/unread status indicators, type-based styling, and action dropdowns. Features notification badges, timestamps, and configurable actions. Perfect for notification centers, alerts dashboard, and user communication systems.","dependencies":["lucide-react"],"registryDependencies":["card","button","badge","separator","dropdown-menu"],"files":[{"path":"src/registry/blocks/application/data-display/cards/cards-05.tsx","content":"\"use client\";\n\nimport { Bell, MoreHorizontal } from \"lucide-react\";\n\nimport { cn } from \"@/registry/lib/utils\";\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  DropdownMenuTrigger,\n} from \"@/registry/ui/dropdown-menu\";\nimport { Separator } from \"@/registry/ui/separator\";\n\nexport interface Cards05Props {\n  className?: string;\n}\n\nconst content = {\n  header: {\n    title: \"Notifications\",\n    description: \"Important alerts and updates\",\n  },\n  notifications: [\n    {\n      id: 1,\n      title: \"Security Alert\",\n      description: \"New login detected from unknown device\",\n      type: \"warning\" as const,\n      timestamp: \"5 minutes ago\",\n      read: false,\n    },\n    {\n      id: 2,\n      title: \"Payment Processed\",\n      description: \"Your monthly subscription has been renewed\",\n      type: \"success\" as const,\n      timestamp: \"1 hour ago\",\n      read: false,\n    },\n    {\n      id: 3,\n      title: \"System Update\",\n      description: \"New features are now available\",\n      type: \"info\" as const,\n      timestamp: \"2 hours ago\",\n      read: true,\n    },\n    {\n      id: 4,\n      title: \"Storage Full\",\n      description: \"Your account storage is 95% full\",\n      type: \"error\" as const,\n      timestamp: \"3 hours ago\",\n      read: false,\n    },\n    {\n      id: 5,\n      title: \"Team Invitation\",\n      description: \"You've been invited to join the Design Team\",\n      type: \"info\" as const,\n      timestamp: \"1 day ago\",\n      read: true,\n    },\n  ],\n  buttons: {\n    viewAll: {\n      text: \"View All Notifications\",\n      variant: \"outline\" as const,\n    },\n    settings: {\n      text: \"Notification Settings\",\n      variant: \"ghost\" as const,\n    },\n  },\n};\n\nexport function Cards05({ className }: Cards05Props) {\n  const getTypeColor = (type: string) => {\n    switch (type) {\n      case \"success\":\n        return \"text-green-600\";\n      case \"warning\":\n        return \"text-yellow-600\";\n      case \"error\":\n        return \"text-red-600\";\n      default:\n        return \"text-blue-600\";\n    }\n  };\n\n  const handleDropdownAction = (\n    action: string,\n    notification: (typeof content.notifications)[0],\n  ) => {\n    console.log(`${action} action for notification:`, notification.title);\n  };\n\n  const handleViewAll = () => {\n    console.log(\"View all notifications\");\n  };\n\n  const handleSettings = () => {\n    console.log(\"Open notification settings\");\n  };\n\n  return (\n    <Card\n      className={cn(\"h-fit max-w-md w-full\", className)}\n      data-testid=\"notifications-card\"\n    >\n      <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-4\">\n        <div>\n          <CardTitle className=\"text-lg flex items-center space-x-2\">\n            <Bell className=\"h-5 w-5\" />\n            <span>{content.header.title}</span>\n          </CardTitle>\n          <CardDescription>{content.header.description}</CardDescription>\n        </div>\n        <Badge\n          variant=\"secondary\"\n          className=\"text-xs\"\n          data-testid=\"unread-count-badge\"\n        >\n          {content.notifications.filter((n) => !n.read).length} new\n        </Badge>\n      </CardHeader>\n      <CardContent>\n        <div className=\"space-y-4\">\n          {content.notifications.map((notification, index) => (\n            <div key={notification.id}>\n              <div\n                className={cn(\n                  \"p-4 rounded-lg border\",\n                  !notification.read ? \"bg-muted/30\" : \"bg-transparent\",\n                )}\n                data-testid={`notification-${notification.id}`}\n              >\n                <div className=\"flex items-start justify-between relative\">\n                  <div className=\"flex-1 min-w-0\">\n                    <div className=\"flex items-center space-x-2 mb-1\">\n                      <h4 className=\"text-sm font-medium text-foreground\">\n                        {notification.title}\n                      </h4>\n                      {!notification.read && (\n                        <div\n                          className=\"h-2 w-2 rounded-full bg-primary\"\n                          data-testid={`unread-indicator-${notification.id}`}\n                        />\n                      )}\n                    </div>\n                    <p className=\"text-sm text-muted-foreground leading-relaxed mb-2\">\n                      {notification.description}\n                    </p>\n                    <div className=\"flex items-center justify-between\">\n                      <span className=\"text-xs text-muted-foreground\">\n                        {notification.timestamp}\n                      </span>\n                      <Badge\n                        variant=\"outline\"\n                        className={cn(\n                          \"text-xs\",\n                          getTypeColor(notification.type),\n                        )}\n                        data-testid={`type-badge-${notification.id}`}\n                      >\n                        {notification.type}\n                      </Badge>\n                    </div>\n                  </div>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"icon\"\n                        className=\"h-6 w-6 absolute top-0 right-0\"\n                        data-testid={`notification-menu-${notification.id}`}\n                      >\n                        <MoreHorizontal className=\"h-3 w-3\" />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      data-testid={`notification-menu-content-${notification.id}`}\n                    >\n                      <DropdownMenuItem\n                        onClick={() =>\n                          handleDropdownAction(\"mark-read\", notification)\n                        }\n                        data-testid={`mark-read-${notification.id}`}\n                      >\n                        Mark as read\n                      </DropdownMenuItem>\n                      <DropdownMenuItem\n                        onClick={() =>\n                          handleDropdownAction(\"archive\", notification)\n                        }\n                        data-testid={`archive-${notification.id}`}\n                      >\n                        Archive\n                      </DropdownMenuItem>\n                      <DropdownMenuItem\n                        onClick={() =>\n                          handleDropdownAction(\"delete\", notification)\n                        }\n                        data-testid={`delete-${notification.id}`}\n                      >\n                        Delete\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </div>\n              </div>\n              {index < content.notifications.length - 1 && (\n                <Separator className=\"mt-4\" />\n              )}\n            </div>\n          ))}\n        </div>\n        <div className=\"pt-4 space-y-2\">\n          <Button\n            variant={content.buttons.viewAll.variant}\n            className=\"w-full bg-transparent\"\n            size=\"sm\"\n            onClick={handleViewAll}\n            data-testid=\"view-all-button\"\n          >\n            {content.buttons.viewAll.text}\n          </Button>\n          <Button\n            variant={content.buttons.settings.variant}\n            className=\"w-full\"\n            size=\"sm\"\n            onClick={handleSettings}\n            data-testid=\"settings-button\"\n          >\n            {content.buttons.settings.text}\n          </Button>\n        </div>\n      </CardContent>\n    </Card>\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"}]}