falta poner hooks botones

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

src/components/EditarIcon.jsx

@@ -0,0 +1,15 @@
+export default function EditarIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="currentColor"
+        d="m21.561 5.318l-2.879-2.879A1.5 1.5 0 0 0 17.621 2c-.385 0-.768.146-1.061.439L13 6H4a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1v-9l3.561-3.561c.293-.293.439-.677.439-1.061s-.146-.767-.439-1.06M11.5 14.672L9.328 12.5l6.293-6.293l2.172 2.172zm-2.561-1.339l1.756 1.728L9 15zM16 19H5V8h6l-3.18 3.18c-.293.293-.478.812-.629 1.289c-.16.5-.191 1.056-.191 1.47V17h3.061c.414 0 1.108-.1 1.571-.29c.464-.19.896-.347 1.188-.64L16 13zm2.5-11.328L16.328 5.5l1.293-1.293l2.171 2.172z"
+      ></path>
+    </svg>
+  );
+}

src/components/NuevaCoord.jsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-export default function NuevaCoord({coord, setcoord, colapsar, tipo}) {
+export default function NuevaCoord({ coord, setcoord, colapsar, tipo }) {
   const [llevaY, setLlevaY] = useState(false);
   const [x, setX] = useState("");
   const [y, setY] = useState("");
@@ -21,8 +21,10 @@ export default function NuevaCoord({coord, setcoord, colapsar, tipo}) {
 
   return (
     <div>
-      <input id="1"
-        type="checkbox" className="form-check-input me-2"
+      <input
+        id="1"
+        type="checkbox"
+        className="form-check-input me-2"
         onChange={(e) => setLlevaY(e.target.checked)}
         data-bs-toggle="collapse"
         data-bs-target="#collapseY"
@@ -30,26 +32,40 @@ export default function NuevaCoord({coord, setcoord, colapsar, tipo}) {
       <label className="form-check-label" htmlFor="1">
         Lleva coordenada y?
       </label>
-      <hr/>
+      <hr />
 
       <div className="d-flex align-items-center gap-1">
         <div className="input-group mb-3">
-          <span class="input-group-text">x:</span>
-          <input type="text" className="form-control" onChange={(e) =>setX(e.target.value)}/>
+          <span class="input-group-text">X:</span>
+          <input
+            type="text"
+            className="form-control"
+            onChange={(e) => setX(e.target.value)}
+          />
         </div>
 
         <div className="input-group mb-3 collapse" id="collapseY">
-          <span class="input-group-text">y:</span>
-          <input type="text" className="form-control" onChange={(e) =>setY(e.target.value)}/>
+          <span class="input-group-text">Y:</span>
+          <input
+            type="text"
+            className="form-control"
+            onChange={(e) => setY(e.target.value)}
+          />
         </div>
 
         <div className="input-group mb-3">
-          <span class="input-group-text">z:</span>
-          <input type="text" className="form-control" onChange={(e) =>setZ(e.target.value)}/>
+          <span class="input-group-text">Z:</span>
+          <input
+            type="text"
+            className="form-control"
+            onChange={(e) => setZ(e.target.value)}
+          />
         </div>
       </div>
-      <hr/>
-      <button className="btn btn-primary" onClick={handleAdd}>Añadir</button>
+      <hr />
+      <button className="btn btn-primary" onClick={handleAdd}>
+        Añadir
+      </button>
     </div>
   );
 }

src/components/RemoveIcon.jsx

@@ -0,0 +1,15 @@
+export default function RemoveIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="currentColor"
+        d="M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zm2-4h2V8H9zm4 0h2V8h-2z"
+      ></path>
+    </svg>
+  );
+}

src/components/ShareIcon.jsx

@@ -0,0 +1,15 @@
+export default function ShareIcon() {
+  return(
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="currentColor"
+        d="M17 22q-1.25 0-2.125-.875T14 19q0-.15.075-.7L7.05 14.2q-.4.375-.925.588T5 15q-1.25 0-2.125-.875T2 12t.875-2.125T5 9q.6 0 1.125.213t.925.587l7.025-4.1q-.05-.175-.062-.337T14 5q0-1.25.875-2.125T17 2t2.125.875T20 5t-.875 2.125T17 8q-.6 0-1.125-.213T14.95 7.2l-7.025 4.1q.05.175.063.338T8 12t-.012.363t-.063.337l7.025 4.1q.4-.375.925-.587T17 16q1.25 0 2.125.875T20 19t-.875 2.125T17 22"
+      ></path>
+    </svg>,
+  );
+}

src/components/StaticModal.jsx

@@ -0,0 +1,44 @@
+export default function Modal() {
+  return (
+    <>
+      <div
+        class="modal fade"
+        id="staticBackdrop"
+        data-bs-backdrop="static"
+        data-bs-keyboard="false"
+        tabIndex="-1"
+        aria-labelledby="staticBackdropLabel"
+        aria-hidden="true"
+      >
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h1 class="modal-title fs-5" id="staticBackdropLabel">
+                Modal title
+              </h1>
+              <button
+                type="button"
+                class="btn-close"
+                data-bs-dismiss="modal"
+                aria-label="Close"
+              ></button>
+            </div>
+            <div class="modal-body">...</div>
+            <div class="modal-footer">
+              <button
+                type="button"
+                class="btn btn-secondary"
+                data-bs-dismiss="modal"
+              >
+                Close
+              </button>
+              <button type="button" class="btn btn-primary">
+                Understood
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

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)||"[]"));
+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);
   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/>
-
-        {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>
+      <hr />
 
+      {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>
     </>
   );
 }