{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "task-list",
  "type": "registry:component",
  "description": "A Card component with optional code display for UI blocks.",
  "registryDependencies": [
    "card",
    "badge",
    "checkbox"
  ],
  "files": [
    {
      "path": "src/app/components/ui-blocks/cards/code/TaskListCode.tsx",
      "content": "import { Card } from \"@/components/ui/card\"\r\nimport { Badge } from \"@/components/ui/badge\";\r\nimport { Checkbox } from \"@/components/ui/checkbox\";\r\nimport Image from \"next/image\";\r\n\r\nconst tasks = [\r\n    {\r\n        title: \"Schedule meeting with\",\r\n        badge: { text: \"Today\", color: \"bg-error\" },\r\n        avatars: [\"/images/profile/user-1.jpg\", \"/images/profile/user-2.jpg\", \"/images/profile/user-3.jpg\"],\r\n    },\r\n    {\r\n        title: \"Give Purchase report to\",\r\n        badge: { text: \"Yesterday\", color: \"bg-primary\" },\r\n        avatars: [\"/images/profile/user-4.jpg\", \"/images/profile/user-5.jpg\"],\r\n    },\r\n    {\r\n        title: \"Book flight for holiday\",\r\n        badge: { text: \"1 week\", color: \"bg-primary\" },\r\n        date: \"26 Jun 2024\",\r\n    },\r\n    {\r\n        title: \"Forward all tasks\",\r\n        badge: { text: \"2 weeks\", color: \"bg-secondary\" },\r\n        date: \"26 Jun 2024\",\r\n    },\r\n    {\r\n        title: \"Receive shipment\",\r\n        badge: { text: \"2 weeks\", color: \"bg-success\" },\r\n        avatars: [\"/images/profile/user-6.jpg\", \"/images/profile/user-7.jpg\", \"/images/profile/user-8.jpg\"],\r\n    },\r\n];\r\n\r\nconst TaskLists = () => {\r\n    return (\r\n        <Card className=\"pb-4 p-0\">\r\n            <h3 className=\"text-lg font-semibold text-dark dark:text-white p-7\">Task List</h3>\r\n\r\n            <div className=\"flex flex-col gap-6 px-7 pb-6\">\r\n                {tasks.map((task, index) => (\r\n                    <div key={index} className=\"flex flex-col gap-2\">\r\n                        <div className=\"flex items-center gap-3\">\r\n                            <Checkbox id={`task-${index}`} />\r\n                            <label htmlFor={`task-${index}`} className=\"flex-1 text-sm font-medium cursor-pointer\">\r\n                                {task.title}\r\n                            </label>\r\n                            <Badge className={`${task.badge.color} text-white`}>\r\n                                {task.badge.text}\r\n                            </Badge>\r\n                        </div>\r\n\r\n                        <div className=\"pl-7 flex items-center gap-2\">\r\n                            {task.date && (\r\n                                <p className=\"text-xs text-muted-foreground\">{task.date}</p>\r\n                            )}\r\n                            {task.avatars && (\r\n                                <div className=\"flex -space-x-2\">\r\n                                    {task.avatars.map((src, i) => (\r\n                                        <Image\r\n                                            key={i}\r\n                                            src={src}\r\n                                            alt=\"user\"\r\n                                            width={30}\r\n                                            height={30}\r\n                                            className=\"rounded-full border border-white dark:border-gray-800\"\r\n                                        />\r\n                                    ))}\r\n                                </div>\r\n                            )}\r\n                        </div>\r\n                    </div>\r\n                ))}\r\n            </div>\r\n        </Card>\r\n    )\r\n}\r\n\r\nexport default TaskLists",
      "type": "registry:component",
      "target": "components/tailwind-admin/cards/task-list/TaskListCode.tsx"
    }
  ]
}