initial commit

src/App.css

@@ -0,0 +1 @@
+@import "tailwindcss"

src/App.jsx

@@ -0,0 +1,18 @@
+import { useState } from 'react'
+
+import Barra from './components/Barra';
+import Keeper from './components/coordkeeper';
+
+function App() {
+const [type, setType] = useState("overworld");
+  return (
+    <div>
+      <Barra active={type} setType={setType} />
+      <div class="container border text-white vw-100 mt-2 rounded p-2">
+        <Keeper tipo={type}/> 
+      </div>
+    </div>
+  )
+}
+
+export default App;

src/components/Barra.jsx

@@ -0,0 +1,40 @@
+export default function Barra ({active, setType}) {
+  return (
+    <nav class="navbar navbar-expand-lg bg-dark-subtle h-fit w-100">
+      <div class="container-fluid">
+        <a class="navbar-brand" href="#">
+          Coords-Keeper
+        </a>
+
+        <div class="justify-content-end">
+          <ul class="navbar-nav">
+            <li className="nav-item">
+              <button
+                className={`btn bg-primary mx-2 ${active === "overworld" ? "text-black active" : "text-gray-100"}`}
+                onClick={() => setType("overworld")}
+              >
+                Overworld
+              </button>
+            </li>
+            <li className="nav-item">
+              <button
+                className={`btn bg-danger mx-2 ${active === "nether" ? "text-black active" : "text-gray-100"}`}
+                onClick={() => setType("nether")}
+              >
+                Nether
+              </button>
+            </li>
+            <li className="nav-item">
+              <button
+                className={`btn bg-success mx-2 ${active === "end" ? "text-black active" : "text-gray-100"}`}
+                onClick={() => setType("end")}
+              >
+                End
+              </button>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  );
+}

src/components/NuevaCoord.jsx

@@ -0,0 +1,55 @@
+import { useState } from "react";
+
+export default function NuevaCoord({coord, setcoord, colapsar, tipo}) {
+  const [llevaY, setLlevaY] = useState(false);
+  const [x, setX] = useState("");
+  const [y, setY] = useState("");
+  const [z, setZ] = useState("");
+
+  const handleAdd = () => {
+    const newCoord = {
+      num: coord.length + 1,
+      x: x,
+      y: llevaY ? y : null,
+      z: z,
+    };
+    
+    setcoord([...coord, newCoord]);
+    localStorage.setItem(tipo, JSON.stringify([...coord, newCoord]));
+    if (colapsar) colapsar();
+  };
+  
+  return (
+    <div>
+      <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"
+      />
+      <label className="form-check-label" htmlFor="1">
+           Lleva coordenada y?
+      </label>
+      <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)}/>
+        </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)}/>
+        </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)}/>
+        </div>
+      </div>
+      <hr/>
+      <button className="btn btn-primary" onClick={handleAdd}>Añadir</button>
+    </div>
+  );
+}

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>
+
+        )}
+    </>
+  );
+}

src/index.css

@@ -0,0 +1,53 @@
+
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

src/main.jsx

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+import "bootstrap/dist/css/bootstrap.min.css";
+import "bootstrap/dist/js/bootstrap.bundle.min.js";
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)