estructura preliminar

.vscode/settings.json

@@ -1,7 +1,22 @@
 {
+<<<<<<< HEAD
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "workbench.editorAssociations": {
+    "*.md": "vscode.markdown.preview.editor"
+  },
+  "files.autoSave": "afterDelay",
+  "files.autoSaveDelay": 700,
+  "editor.minimap.enabled": false
+}
+=======
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "workbench.editorAssociations": {   
         "*.md": "vscode.markdown.preview.editor"
+    },
+    "[javascriptreact]": {
+        "editor.defaultFormatter": "vscode.typescript-language-features"
     }
-}
+}
+>>>>>>> 55740c5a29af914d637bcc18b7f1eaec7f6bbc14

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "bootstrap": "^5.2.2",
+    "bootstrap-icons": "^1.13.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

src/js/components/Home.jsx

@@ -1,28 +1,74 @@
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 //include images into your bundle
 import rigoImage from "../../img/rigo-baby.jpg";
 
 //create your first component
 const Home = () => {
-	return (
-		<div className="text-center">
-
-
-			<h1 className="text-center mt-5">Hello Rigo!</h1>
-			<p>
-				<img src={rigoImage} />
-			</p>
-			<a href="#" className="btn btn-success">
-				If you see this green button... bootstrap is working...
-			</a>
-			<p>
-				Made by{" "}
-				<a href="http://www.4geeksacademy.com">4Geeks Academy</a>, with
-				love!
-			</p>
-		</div>
-	);
+  const [lista, setLista] = useState([])
+  const cancionActiva = useRef()
+
+  const obtenerCanciones = async () => {
+    try {
+      const response = await fetch("https://playground.4geeks.com/sound/songs")
+      console.log(response)
+      const data = await response.json()
+      console.log(data.songs)
+      setLista(data.songs)
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  function reproduce(urlCancion) { //concatena la url base con la urla de la cancion//
+    let urlBase = "https://playground.4geeks.com"
+    cancionActiva.current.src = urlBase.concat(urlCancion)
+    cancionActiva.current.play() // cuando tenemos el usl la ejecuta//
+  }
+
+  useEffect(() => {
+    obtenerCanciones()
+  }, []) // SE EJECUTA UNA SOLA VEZ //
+
+
+  return (
+    <div className="text-center">
+      <h1>Audio Player</h1>
+      <div className="lista-de-canciones container">
+        <ul className="list-group">
+          {lista.map((cancion) => ( // () = return, para mostar la informacion de una estado que sea un array//
+            <li
+              key={cancion.id} // pos cada map poner un key//
+              className="list-group-item"
+              value={cancion} 
+              onClick={() => reproduce(cancion.url)}
+            >
+              {cancion.name}
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <div className="footer mt-4">
+        <audio controls ref={cancionActiva}>
+          <source src={cancionActiva} type="audio/mp3"/> 
+        </audio>
+        {/* <div className="botones d-flex justify-content-center gap-2">
+          <button type="button" className="btn btn-primary btn-sm">
+            <i className="bi bi-skip-backward-fill"></i>
+          </button>
+          <button type="button" className="btn btn-secondary btn-sm">
+            <i className="bi bi-play-fill"></i>
+          </button>
+          <button type="button" className="btn btn-primary btn-sm">
+            <i className="bi bi-skip-forward-fill"></i>
+          </button>
+        </div> */}
+      </div>
+    </div>
+  );
 };
 
-export default Home;
+export default Home;
+
+// Hola! primer commit

src/js/main.jsx

@@ -3,7 +3,8 @@ import ReactDOM from 'react-dom/client'
 
 //Bootstrap
 import "bootstrap/dist/css/bootstrap.min.css";
-import "bootstrap"
+import "bootstrap";
+import "bootstrap-icons/font/bootstrap-icons.css"
 
 // index.css'
 import '../styles/index.css'