falta poner hooks botones

Signed-off-by: fede <federico.nicolas.polidoro@gmail.com>

src/components/coordkeeper.jsx

@@ -1,13 +1,20 @@
 import { useEffect, useRef, useState } from "react";
 import NuevaCoord from "./NuevaCoord";
+import EditarIcon from "./EditarIcon";
+import ShareIcon from "./ShareIcon";
+import RemoveIcon from "./RemoveIcon";
+import StaticModal from "./StaticModal";
 
-export default function Keeper({tipo}){
-  const [coords,setCoords] = useState(JSON.parse(localStorage.getItem(tipo)||"[]"));
-  const collapseRef = useRef(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);
+  console.log(coords);
   useEffect(() => {
-    const storedCoords = JSON.parse(localStorage.getItem(tipo)||"[]");
+    const storedCoords = JSON.parse(localStorage.getItem(tipo) || "[]");
 
     console.log(storedCoords);
     if (storedCoords) {
@@ -15,6 +22,17 @@ export default function Keeper({tipo}){
     }
   }, [tipo]);
 
+  const Editar = () => {
+    //wip
+  };
+
+  const Compartir = () => {
+    //wip
+  };
+
+  const Remover = () => {
+    setModal(true);
+  };
   const collapseAccordion = () => {
     if (collapseRef.current) {
       const bsCollapse = new window.bootstrap.Collapse(collapseRef.current, {
@@ -25,6 +43,7 @@ export default function Keeper({tipo}){
   };
   return (
     <>
+      {showModal && <StaticModal />}
       <div className="accordion" id="accordionNuevaCoord">
         <div className="accordion-item">
           <h2 className="accordion-header" id="headingNuevaCoord">
@@ -48,20 +67,69 @@ export default function Keeper({tipo}){
             ref={collapseRef}
           >
             <div className="accordion-body">
-              <NuevaCoord coord={coords} setcoord={setCoords} colapsar={collapseAccordion} tipo={tipo} />
+              <NuevaCoord
+                coord={coords}
+                setcoord={setCoords}
+                colapsar={collapseAccordion}
+                tipo={tipo}
+              />
             </div>
           </div>
         </div>
       </div>
-      <hr/>
+      <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 btn-sm">Editar</button><button className="btn btn-sm btn-outline-info ms-2">Compartir</button></div>
+      {coords.length == 0 && (
+        <h2 className="list-group-item text-center">
+          No hay Coordenadas que Mostrar.
+        </h2>
+      )}
 
-        )}
+      <table class="table table-hover table-striped">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>X:</th>
+            <th>Y:</th>
+            <th>Z:</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {coords.length != 0 &&
+            coords.map((x) => (
+              <tr>
+                <td>
+                  <b>#{x.num}:</b>
+                </td>
+
+                <td>{x.x}</td>
+                <td>{x.y !== null && `Y: ${x.y}`}</td>
+                <td>{x.z}</td>
+                <td>
+                  <button
+                    class="ms-2  btn btn-outline-warning btn-sm"
+                    onClick={() => Editar()}
+                  >
+                    <EditarIcon />
+                  </button>
+                  <button
+                    className="btn btn-sm btn-outline-info ms-2"
+                    onClick={() => Compartir()}
+                  >
+                    <ShareIcon />
+                  </button>
+                  <button
+                    className="btn btn-sm btn-outline-danger ms-2"
+                    onClick={() => Remover()}
+                  >
+                    <RemoveIcon />
+                  </button>
+                </td>
+              </tr>
+            ))}
+        </tbody>
+      </table>
     </>
   );
 }