{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animate-table-motion",
  "type": "registry:component",
  "description": "A table component with row animation.",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "table"
  ],
  "files": [
    {
      "path": "src/app/components/animatedComponents/table/animate-table/AnimateTableMotion.tsx",
      "content": "\"use client\";\r\n\r\nimport { motion, Variants } from \"framer-motion\";\r\nimport {\r\n    Table,\r\n    TableHeader,\r\n    TableRow,\r\n    TableHead,\r\n    TableCell,\r\n} from \"@/components/ui/table\";\r\nimport Image from \"next/image\";\r\n\r\nconst tableVariants: Variants = {\r\n    hidden: {},\r\n    show: {\r\n        transition: { staggerChildren: 0.25 },\r\n    },\r\n};\r\n\r\nconst rowVariants: Variants = {\r\n    hidden: { opacity: 0, y: 20 },\r\n    show: {\r\n        opacity: 1,\r\n        y: 0,\r\n        transition: {\r\n            duration: 0.5,\r\n            ease: \"easeOut\",\r\n        },\r\n    },\r\n};\r\n\r\nconst products = [\r\n  {\r\n    name: 'Apple MacBook Pro 17\"',\r\n    color: \"Silver\",\r\n    category: \"Laptop\",\r\n    badgeColor:\"bg-primary/10 text-primary\",\r\n    price: \"$2999\",\r\n    user: {\r\n      name: \"John Doe\",\r\n      email: \"john@example.com\",\r\n      image: \"/images/profile/user-1.jpg\",\r\n    },\r\n  },\r\n  {\r\n    name: \"Microsoft Surface Pro\",\r\n    color: \"White\",\r\n    category: \"Laptop PC\",\r\n    badgeColor:\"bg-secondary/10 text-secondary\",\r\n    price: \"$1999\",\r\n    user: {\r\n      name: \"Jane Smith\",\r\n      email: \"jane@example.com\",\r\n      image: \"/images/profile/user-2.jpg\",\r\n    },\r\n  },\r\n  {\r\n    name: \"Magic Mouse 2\",\r\n    color: \"Black\",\r\n    category: \"Accessories\",\r\n    badgeColor:\"bg-success/10 text-success\",\r\n    price: \"$99\",\r\n    user: {\r\n      name: \"Alice Johnson\",\r\n      email: \"alice@example.com\",\r\n      image: \"/images/profile/user-3.jpg\",\r\n    },\r\n  },\r\n  {\r\n    name: \"iPad Pro 12.9\",\r\n    color: \"Space Gray\",\r\n    category: \"Tablet\",\r\n    badgeColor:\"bg-warning/10 text-warning\",\r\n    price: \"$1099\",\r\n    user: {\r\n      name: \"Michael Brown\",\r\n      email: \"michael@example.com\",\r\n      image: \"/images/profile/user-4.jpg\",\r\n    },\r\n  },\r\n  {\r\n    name: \"AirPods Pro\",\r\n    color: \"White\",\r\n    category: \"Accessories\",\r\n    badgeColor:\"bg-success/10 text-success\",\r\n    price: \"$249\",\r\n    user: {\r\n      name: \"Emma Wilson\",\r\n      email: \"emma@example.com\",\r\n      image: \"/images/profile/user-5.jpg\",\r\n    },\r\n  },\r\n];\r\n\r\n\r\nexport default function AnimateTableMotion({replayAnimation=0}:any) {\r\n    return (\r\n        <motion.div\r\n            initial={{ opacity: 0, scale: 0.98 }}\r\n            animate={{ opacity: 1, scale: 1 }}\r\n            transition={{ duration: 0.4, ease: \"easeOut\" }}\r\n            className=\"rounded-md overflow-hidden shadow\"\r\n            key={replayAnimation}\r\n        >\r\n            <Table className=\"overflow-hidden\">\r\n                <TableHeader className=\"bg-primary/10\">\r\n                    <TableRow>\r\n                        <TableHead>User Info</TableHead>\r\n                        <TableHead>Product name</TableHead>\r\n                        <TableHead> Color</TableHead>\r\n                        <TableHead>Category</TableHead>\r\n                        <TableHead>Price</TableHead>\r\n                        <TableHead>\r\n                            <span className=\"sr-only\">Edit</span>\r\n                        </TableHead>\r\n                    </TableRow>\r\n                </TableHeader>\r\n\r\n                <motion.tbody\r\n                    variants={tableVariants}\r\n                    initial=\"hidden\"\r\n                    animate=\"show\"\r\n                >\r\n                    {products.map((product, idx) => (\r\n                        <motion.tr\r\n                            key={idx}\r\n                            variants={rowVariants}\r\n                            className=\"bg-white dark:bg-gray-800\"\r\n                        >\r\n                            <TableCell>\r\n                                <div className=\"flex items-center gap-2\">\r\n                                    <Image src={product.user.image} width={36} height={36} className=\"rounded-full\" alt=\"user\" />\r\n                                    <div className=\"flex flex-col\">\r\n                                        <span className=\"font-medium text-gray-900 dark:text-white\">\r\n                                            {product.user.name}\r\n                                        </span>\r\n                                        <span className=\"text-sm text-gray-500 dark:text-gray-400\">\r\n                                            {product.user.email}\r\n                                        </span>\r\n                                    </div>\r\n                                </div>\r\n                            </TableCell>\r\n                            <TableCell className=\"font-medium text-gray-900 dark:text-white\">\r\n                                {product.name}\r\n                            </TableCell>\r\n                            <TableCell>{product.color}</TableCell>\r\n                            <TableCell><span className={`py-1 text-xs px-3 rounded-full ${product.badgeColor}`} >{product.category}</span></TableCell>\r\n                            <TableCell>{product.price}</TableCell>\r\n\r\n\r\n                            <TableCell>\r\n                                <a\r\n                                    href=\"#\"\r\n                                    className=\"font-medium text-primary hover:underline dark:text-primary\"\r\n                                >\r\n                                    Edit\r\n                                </a>\r\n                            </TableCell>\r\n                        </motion.tr>\r\n                    ))}\r\n                </motion.tbody>\r\n            </Table>\r\n        </motion.div>\r\n    );\r\n}\r\n",
      "type": "registry:component",
      "target": "components/animated/table/animate-table/AnimateTableMotion.tsx"
    }
  ]
}