añadido que elimine coords

src/components/NuevaCoord.jsx

@@ -16,7 +16,6 @@ export default function NuevaCoord({ coord, setcoord, colapsar, tipo }) {
 
     setcoord([...coord, newCoord]);
     localStorage.setItem(tipo, JSON.stringify([...coord, newCoord]));
-    if (colapsar) colapsar();
   };
 
   return (

src/components/StaticModal.jsx

@@ -1,39 +1,44 @@
-export default function Modal() {
+export default function Modal({ CloseModal, Coord, EliminarCoord }) {
   return (
     <>
       <div
-        class="modal fade"
+        className="modal fade show"
         id="staticBackdrop"
         data-bs-backdrop="static"
-        data-bs-keyboard="false"
-        tabIndex="-1"
-        aria-labelledby="staticBackdropLabel"
-        aria-hidden="true"
+        style={{ display: "block" }}
       >
-        <div class="modal-dialog">
-          <div class="modal-content">
-            <div class="modal-header">
-              <h1 class="modal-title fs-5" id="staticBackdropLabel">
-                Modal title
-              </h1>
+        <div className="modal-dialog">
+          <div className="modal-content">
+            <div className="modal-header">
+              <h1 className="modal-title fs-5">Eliminar Coordenada</h1>
               <button
                 type="button"
-                class="btn-close"
-                data-bs-dismiss="modal"
-                aria-label="Close"
+                className="btn-close"
+                onClick={CloseModal}
               ></button>
             </div>
-            <div class="modal-body">...</div>
-            <div class="modal-footer">
+            <div className="modal-body">
+              {console.log(Coord)}
+              Desea eliminar la Coordenada: X: {Coord.x},
+              {Coord.y != null && `Y: ${Coord.y}, `}Z: {Coord.z}
+            </div>
+            <div className="modal-footer">
               <button
                 type="button"
-                class="btn btn-secondary"
-                data-bs-dismiss="modal"
+                className="btn btn-danger"
+                onClick={() => {
+                  EliminarCoord();
+                  CloseModal();
+                }}
               >
-                Close
+                Eliminar
               </button>
-              <button type="button" class="btn btn-primary">
-                Understood
+              <button
+                type="button"
+                className="btn btn-secondary"
+                onClick={CloseModal}
+              >
+                Cerrar
               </button>
             </div>
           </div>

src/components/coordkeeper.jsx

@@ -5,14 +5,31 @@ import ShareIcon from "./ShareIcon";
 import RemoveIcon from "./RemoveIcon";
 import StaticModal from "./StaticModal";
 
+function Modall({ show, CloseModal, Coord, Coords, EliminarCoord, tipo }) {
+  if (show === true && Coord !== null) {
+    return (
+      <StaticModal
+        CloseModal={CloseModal}
+        Coord={Coord}
+        EliminarCoord={() => {
+          const nuevasCoords = Coords.filter((c) => c !== Coord);
+          localStorage.setItem(tipo, JSON.stringify(nuevasCoords));
+          EliminarCoord(nuevasCoords);
+        }}
+      />
+    );
+  }
+  return null;
+}
+
 export default function Keeper({ tipo }) {
   const [coords, setCoords] = useState(
     JSON.parse(localStorage.getItem(tipo) || "[]"),
   );
   const collapseRef = useRef(null);
   const [showModal, setModal] = useState(false);
-
-  console.log(coords);
+  //const [showShareToast, setShowShareToast] = useState(false);
+  const [selCoord, setCoord] = useState(null);
   useEffect(() => {
     const storedCoords = JSON.parse(localStorage.getItem(tipo) || "[]");
 
@@ -30,7 +47,8 @@ export default function Keeper({ tipo }) {
     //wip
   };
 
-  const Remover = () => {
+  const Remover = (coord) => {
+    setCoord(coord);
     setModal(true);
   };
   const collapseAccordion = () => {
@@ -43,7 +61,14 @@ export default function Keeper({ tipo }) {
   };
   return (
     <>
-      {showModal && <StaticModal />}
+      <Modall
+        show={showModal}
+        CloseModal={() => setModal(false)}
+        Coord={selCoord}
+        Coords={coords}
+        EliminarCoord={setCoords}
+        tipo={tipo}
+      />
       <div className="accordion" id="accordionNuevaCoord">
         <div className="accordion-item">
           <h2 className="accordion-header" id="headingNuevaCoord">
@@ -100,7 +125,7 @@ export default function Keeper({ tipo }) {
             coords.map((x) => (
               <tr>
                 <td>
-                  <b>#{x.num}:</b>
+                  <b>{x.num}</b>
                 </td>
 
                 <td>{x.x}</td>
@@ -121,7 +146,7 @@ export default function Keeper({ tipo }) {
                   </button>
                   <button
                     className="btn btn-sm btn-outline-danger ms-2"
-                    onClick={() => Remover()}
+                    onClick={() => Remover(x)}
                   >
                     <RemoveIcon />
                   </button>