List 1Retro

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", role: "ADMIN" },
9  { id: 2, name: "JANE_SMITH", role: "USER" },
10  { id: 3, name: "JIM_BEAM", role: "GUEST" },
11  { id: 4, name: "ALICE_WONDER", role: "MOD" },
12];
13 
14export function List1RetroDemo() {
15  const [filteredDemo, setFilteredDemo] = useState(demo);
16 
17  const handleDelete = useCallback((id) => {
18    setFilteredDemo((prev) => prev.filter((p) => p.id !== id));
19  }, []);
20 
21  const handleAdd = useCallback(() => {
22    const newId = Math.max(...filteredDemo.map((item) => item.id), 0) + 1;
23    const roles = ["USER", "GUEST", "BOT", "ADMIN"];
24    const newItem = {
25      id: newId,
26      name: `USER_${newId}`,
27      role: roles[Math.floor(Math.random() * roles.length)],
28    };
29    setFilteredDemo((prev) => [...prev, newItem]);
30  }, [filteredDemo]);
31 
32  return (
33    <div className="w-full md:p-4 flex items-center justify-center overflow-x-hidden font-mono text-black">
34        <div className="w-full flex flex-col gap-4 max-w-md border-2 border-black p-4 shadow-[8px_8px_0px_0px_#000000] bg-white">
35            <div className="border-b-2 border-black pb-2 flex justify-between items-center">
36                <span className="font-bold uppercase tracking-widest">USER_DATABASE.db</span>
37                <span className="text-xs border border-black px-2 py-0.5 rounded-full">{filteredDemo.length} ENTRIES</span>
38            </div>
39            
40          <button
41            onClick={handleAdd}
42            className="flex items-center justify-center gap-2 bg-white hover:bg-black hover:text-white transition-colors duration-200 text-black border-2 border-black p-3 font-bold uppercase tracking-wider w-full active:translate-y-1 active:shadow-inner"
43          >
44            <Plus width={18} height={18} />
45            <span className="text-sm md:text-base">INSERT_RECORD</span>
46          </button>
47          
48          <div className="flex flex-col gap-2">
49            <AnimatePresence initial={false}>
50            {filteredDemo.map((item) => (
51              <motion.div
52                key={item.id}
53                initial={{
54                  opacity: 0,
55                  height: 0,
56                }}
57                animate={{
58                  opacity: 1,
59                  height: "auto",
60                }}
61                exit={{ opacity: 0, height: 0 }}
62// … truncated