List 1Nova

1"use client";
2 
3import React, { useCallback, useState } from "react";
4import { Trash, Plus } from "lucide-react";
5import { AnimatePresence, motion } from "motion/react";
6 
7const demo = [
8  { id: 1, name: "John Doe", age: 25 },
9  { id: 2, name: "Jane Smith", age: 30 },
10  { id: 3, name: "Jim Beam", age: 35 },
11  { id: 4, name: "John Doe", age: 25 },
12  { id: 5, name: "John Doe", age: 25 },
13];
14 
15const ListExample = () => {
16  const [filteredDemo, setFilteredDemo] = useState(demo);
17 
18  const handleDelete = useCallback(
19    (id) => {
20      setFilteredDemo((prev) => prev.filter((p) => p.id !== id));
21    },
22    []
23  );
24 
25  const handleAdd = useCallback(() => {
26    const newId = Math.max(...filteredDemo.map((item) => item.id), 0) + 1;
27    const newItem = {
28      id: newId,
29      name: `New Item ${newId}`,
30      age: Math.floor(Math.random() * 50) + 20,
31    };
32    setFilteredDemo((prev) => [...prev, newItem]);
33  }, [filteredDemo]);
34 
35  return (
36    <div className="w-full h-full md:p-4 flex items-center overflow-x-hidden">
37      <div className="w-full h-full flex flex-col gap-2 max-w-md">
38        <button
39          onClick={handleAdd}
40          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"
41        >
42          <Plus width={18} height={18} />
43          <span className="text-sm md:text-base">Add Item</span>
44        </button>
45        <AnimatePresence initial={false}>
46          {filteredDemo.map((item) => {
47            return (
48              <motion.div
49                key={item.id}
50                initial={{
51                  opacity: 0,
52                  x: 50,
53                  y: "100%",
54                  height: 0,
55                }}
56                animate={{
57                  opacity: 1,
58                  x: 0,
59                  y: 0,
60                  height: "auto",
61                }}
62                exit={{ opacity: 0, x: 50, height: 0 }}
63                transition={{ duration: 0.2, ease: "easeOut" }}
64                className="w-full flex gap-2"
65              >
66                <motion.div
67                  initial={{
68                    opacity: 0,
69                    scale: 0.98,
70                    filter: "blur(4px)",
71                  }}
72                  animate={{
73                    opacity: 1,
74                    scale: 1,
75                    filter: "blur(0px)",
76                  }}
77// … truncated