{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "list-1-nova",
  "title": "List 1Nova",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "src/registry/lists/nova/List1Nova.jsx",
      "content": "\"use client\";\n\nimport React, { useCallback, useState } from \"react\";\nimport { Trash, Plus } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\n\nconst demo = [\n  { id: 1, name: \"John Doe\", age: 25 },\n  { id: 2, name: \"Jane Smith\", age: 30 },\n  { id: 3, name: \"Jim Beam\", age: 35 },\n  { id: 4, name: \"John Doe\", age: 25 },\n  { id: 5, name: \"John Doe\", age: 25 },\n];\n\nconst ListExample = () => {\n  const [filteredDemo, setFilteredDemo] = useState(demo);\n\n  const handleDelete = useCallback(\n    (id) => {\n      setFilteredDemo((prev) => prev.filter((p) => p.id !== id));\n    },\n    []\n  );\n\n  const handleAdd = useCallback(() => {\n    const newId = Math.max(...filteredDemo.map((item) => item.id), 0) + 1;\n    const newItem = {\n      id: newId,\n      name: `New Item ${newId}`,\n      age: Math.floor(Math.random() * 50) + 20,\n    };\n    setFilteredDemo((prev) => [...prev, newItem]);\n  }, [filteredDemo]);\n\n  return (\n    <div className=\"w-full h-full md:p-4 flex items-center overflow-x-hidden\">\n      <div className=\"w-full h-full flex flex-col gap-2 max-w-md\">\n        <button\n          onClick={handleAdd}\n          className=\"flex items-center mb-1 justify-center gap-2 bg-zinc-700/20 hover:bg-zinc-700/40 transition-all cursor-pointer duration-300 text-gray-300 hover:text-white rounded-md p-2 border-[0.6px] border-white/20 w-full\"\n        >\n          <Plus width={18} height={18} />\n          <span className=\"text-sm md:text-base\">Add Item</span>\n        </button>\n        <AnimatePresence initial={false}>\n          {filteredDemo.map((item) => {\n            return (\n              <motion.div\n                key={item.id}\n                initial={{\n                  opacity: 0,\n                  x: 50,\n                  y: \"100%\",\n                  height: 0,\n                }}\n                animate={{\n                  opacity: 1,\n                  x: 0,\n                  y: 0,\n                  height: \"auto\",\n                }}\n                exit={{ opacity: 0, x: 50, height: 0 }}\n                transition={{ duration: 0.2, ease: \"easeOut\" }}\n                className=\"w-full flex gap-2\"\n              >\n                <motion.div\n                  initial={{\n                    opacity: 0,\n                    scale: 0.98,\n                    filter: \"blur(4px)\",\n                  }}\n                  animate={{\n                    opacity: 1,\n                    scale: 1,\n                    filter: \"blur(0px)\",\n                  }}\n                  exit={{\n                    opacity: 0,\n                    scale: 0.98,\n                    filter: \"blur(4px)\",\n                  }}\n                  transition={{ duration: 0.15, ease: \"easeOut\" }}\n                  className=\"w-full items-center grid grid-cols-3 bg-zinc-700/20 origin-right rounded-md p-2 md:grid-cols-4 border-[0.6px] border-white/20 text-gray-300\"\n                >\n                  <h1 className=\"truncate text-sm md:text-base\">\n                    {item.name}\n                  </h1>\n                  <p className=\"truncate text-sm md:text-base\">\n                    {item.age}\n                  </p>\n                  <div className=\"flex justify-end items-center w-full md:col-start-4\">\n                    <button\n                      onClick={() => handleDelete(item.id)}\n                      className=\"hover:bg-white/80 transition-all hover:ease-out ease-in-out duration-300 text-white hover:text-black p-1 rounded-sm w-fit hover:cursor-pointer\"\n                    >\n                      <Trash width={16} height={16} />\n                    </button>\n                  </div>\n                </motion.div>\n              </motion.div>\n            );\n          })}\n        </AnimatePresence>\n      </div>\n    </div>\n  );\n};\n\nexport default ListExample\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}