diff --git a/.vscode/settings.json b/.vscode/settings.json
index d83b5ba6c..f45399f52 100644
--- a/.vscode/settings.json
+++ b/.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"
}
-}
\ No newline at end of file
+}
+>>>>>>> 55740c5a29af914d637bcc18b7f1eaec7f6bbc14
diff --git a/package-lock.json b/package-lock.json
index d6b5fd56a..580ee0e7a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
"version": "0.0.0",
"dependencies": {
"bootstrap": "^5.2.2",
+ "bootstrap-icons": "^1.13.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
@@ -21,6 +22,9 @@
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"vite": "^5.2.0"
+ },
+ "engines": {
+ "node": ">=20.0.0"
}
},
"node_modules/@eslint-community/eslint-utils": {
@@ -5726,6 +5730,21 @@
"@popperjs/core": "^2.11.8"
}
},
+ "node_modules/bootstrap-icons": {
+ "version": "1.13.1",
+ "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.13.1.tgz",
+ "integrity": "sha512-ijombt4v6bv5CLeXvRWKy7CuM3TRTuPEuGaGKvTV5cz65rQSY8RQ2JcHt6b90cBBAC7s8fsf2EkQDldzCoXUjw==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/twbs"
+ },
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/bootstrap"
+ }
+ ]
+ },
"node_modules/chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
diff --git a/package.json b/package.json
index 00c2157f5..4cbd981d0 100644
--- a/package.json
+++ b/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"
},
diff --git a/src/js/components/Home.jsx b/src/js/components/Home.jsx
index 74bc8d768..747393c66 100644
--- a/src/js/components/Home.jsx
+++ b/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 (
-
- );
+ 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 (
+
+
Audio Player
+
+
+ {lista.map((cancion) => ( // () = return, para mostar la informacion de una estado que sea un array//
+ - reproduce(cancion.url)}
+ >
+ {cancion.name}
+
+ ))}
+
+
+
+
+
+ {/*
+
+
+
+
*/}
+
+