initial commit

src/components/coordkeeper.jsx

@@ -0,0 +1,67 @@
+import { useEffect, useRef, useState } from "react";
+import NuevaCoord from "./NuevaCoord";
+
+export default function Keeper({tipo}){
+  const [coords,setCoords] = useState(JSON.parse(localStorage.getItem(tipo)||"[]"));
+  const collapseRef = useRef(null); 
+
+    console.log(coords);
+  useEffect(() => {
+    const storedCoords = JSON.parse(localStorage.getItem(tipo)||"[]");
+
+    console.log(storedCoords);
+    if (storedCoords) {
+      setCoords(storedCoords);
+    }
+  }, [tipo]);
+
+  const collapseAccordion = () => {
+    if (collapseRef.current) {
+      const bsCollapse = new window.bootstrap.Collapse(collapseRef.current, {
+        toggle: false,
+      });
+      bsCollapse.hide();
+    }
+  };
+  return (
+    <>
+      <div className="accordion" id="accordionNuevaCoord">
+        <div className="accordion-item">
+          <h2 className="accordion-header" id="headingNuevaCoord">
+            <button
+              className="accordion-button collapsed"
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target="#collapseNuevaCoord"
+              aria-expanded="false"
+              aria-controls="collapseNuevaCoord"
+            >
+              Nueva Coordenada
+            </button>
+          </h2>
+
+          <div
+            id="collapseNuevaCoord"
+            className="accordion-collapse collapse"
+            aria-labelledby="headingNuevaCoord"
+            data-bs-parent="#accordionNuevaCoord"
+            ref={collapseRef}
+          >
+            <div className="accordion-body">
+              <NuevaCoord coord={coords} setcoord={setCoords} colapsar={collapseAccordion} tipo={tipo} />
+            </div>
+          </div>
+        </div>
+      </div>
+      <hr/>
+
+        {coords.length == 0 &&
+        <h3 className="text-center">No hay Coordenadas que Mostrar.</h3>
+        }
+        {coords.length !=0 && coords.map(x=> 
+          <div className="m-2"><b>#{x.num}:</b>  x:{x.x} {x.y !== null && `y: ${x.y}`} z:{x.z} <button class="btn btn-outline-warning">Editar</button></div>
+
+        )}
+    </>
+  );
+}