Multi Select 1Retro

1"use client";
2 
3import React, { useState } from "react";
4import { Check, X } from "lucide-react";
5import { motion, AnimatePresence } from "motion/react";
6 
7const options = [
8  { label: "REACT_LIB", value: "react" },
9  { label: "NEXT_JS_FW", value: "nextjs" },
10  { label: "TAILWIND_CSS", value: "tailwind" },
11  { label: "TYPESCRIPT", value: "typescript" },
12  { label: "MONGO_DB", value: "mongodb" },
13  { label: "POSTGRES_QL", value: "postgresql" },
14];
15 
16export function MultiSelectRetro() {
17  const [selected, setSelected] = useState([]);
18  const [isOpen, setIsOpen] = useState(false);
19 
20  const toggleOption = (value) => {
21    setSelected((prev) =>
22      prev.includes(value)
23        ? prev.filter((item) => item !== value)
24        : [...prev, value]
25    );
26  };
27 
28  const removeOption = (value, e) => {
29    e.stopPropagation();
30    setSelected((prev) => prev.filter((item) => item !== value));
31  };
32 
33  return (    
34    <div className="w-full max-w-sm relative bg-white p-4 font-mono text-black">
35      <label className="block text-xs font-bold uppercase mb-1 tracking-widest pl-1">
36          SELECT_MODULES:
37      </label>
38      
39      <div
40          onClick={() => setIsOpen(!isOpen)}
41          className={`border-2 border-black bg-white p-2 min-h-[48px] flex items-center shadow-[4px_4px_0px_0px_#000000] cursor-pointer transition-all ${isOpen ? 'shadow-none translate-x-[2px] translate-y-[2px]' : ''}`}
42      >
43          <div className="flex flex-wrap gap-2 flex-grow">
44              {selected.length === 0 && (
45                  <span className="text-gray-500 uppercase">NO_MODULES_SELECTED</span>
46              )}
47              <AnimatePresence>
48                  {selected.map((val) => {
49                      const label = options.find(o => o.value === val)?.label;
50                      return (
51                          <motion.div
52                              key={val}
53                              initial={{ opacity: 0, scale: 0.8 }}
54                              animate={{ opacity: 1, scale: 1 }}
55                              exit={{ opacity: 0, scale: 0.8 }}
56                              className="bg-black text-white px-2 py-1 text-xs font-bold uppercase flex items-center gap-1"
57                          >
58                              {label}
59                              <span onClick={(e) => removeOption(val, e)} className="cursor-pointer hover:text-red-400">
60                                  <X size={12} strokeWidth={4} />
61                              </span>
62// … truncated