Temporizador simple

package.json

@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "bootstrap": "^5.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

src/js/components/Home.jsx

@@ -1,28 +1,89 @@
-import React from "react";
+import React, { Component } from "react";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import TemporizadorDeSegundos from "./TemporizadorDeSegundos";
+import { faPlay, faPause, faArrowsRotate } from '@fortawesome/free-solid-svg-icons';
 
-//include images into your bundle
-import rigoImage from "../../img/rigo-baby.jpg";
+class Home extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            timerSeconds: 0,
+            estaPausa: false,
+            estaAlertado: false,
+            alertaEnEntrada: "100"
+        };
+        this.interval = setInterval(this.incrementarTemporizador, 1000);
+    }
 
-//create your first component
-const Home = () => {
-	return (
-		<div className="text-center">
-
+    incrementarTemporizador = () => {
+        if (!this.state.estaPausa) {
+            this.setState(prevState => {
+                const nuevoTiempo = prevState.timerSeconds + 1;
+                const alertaEnNumero = Number(prevState.alertaEnEntrada);
+                return {
+                    timerSeconds: nuevoTiempo,
+                    estaAlertado: nuevoTiempo >= alertaEnNumero
+                };
+            });
+        }
+    };
 
-			<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>
-	);
-};
+    manejarCambioEntrada = (event) => {
+        const nuevoValor = event.target.value;
+        this.setState(prevState => ({
+            alertaEnEntrada: nuevoValor,
+            estaAlertado: prevState.timerSeconds >= Number(nuevoValor)
+        }));
+    };
 
-export default Home;
+    alternarPausa = () => {
+        this.setState(prevState => ({ estaPausa: !prevState.estaPausa }));
+    };
+
+    temporizadorDeReinicio = () => {
+        this.setState({ timerSeconds: 0, estaAlertado: false });
+    };
+
+    render() {
+        return (
+            <div className="container d-flex flex-column align-items-center py-4">
+                {this.state.estaAlertado && 
+                    <div className="alert alert-danger" role="alert">
+                        {'Alerta!! El temporizador ha alcanzado ' + this.state.alertaEnEntrada + ' segundos.'}
+                    </div>
+                }
+                <TemporizadorDeSegundos segundos={this.state.timerSeconds} />
+
+                <div className="row justify-content-center my-3">
+                    <div className="col-auto">
+                        <button type="button" className="btn btn-secondary mx-2" onClick={this.alternarPausa}>
+                            {!this.state.estaPausa ? <FontAwesomeIcon icon={faPause} /> : <FontAwesomeIcon icon={faPlay} />}
+                        </button>
+                        <button type="button" className="btn btn-secondary mx-2" onClick={this.temporizadorDeReinicio}>
+                            <FontAwesomeIcon icon={faArrowsRotate} />
+                        </button>
+                    </div>
+                </div>
+
+                <div className="row justify-content-center">
+                    <div className="col-auto">
+                        <div className="input-group">
+                            <div className="input-group-prepend">
+                                <span className="input-group-text">Alerta en</span>
+                            </div>
+                            <input
+                                type="text"
+                                className="form-control text-center"
+                                aria-label="alerta en (segundos)"
+                                onChange={this.manejarCambioEntrada}
+                                value={this.state.alertaEnEntrada}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Home;

src/js/components/TarjetaTemporizadora.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faClock } from '@fortawesome/free-solid-svg-icons'
+
+const TarjetaTemporizadora = (props) => {
+    return (
+        <div className="TarjetaTemporizadora">
+            {props.isIcon && <FontAwesomeIcon icon={faClock} style={{color: "#ffffff",}} />}
+            {
+                !props.isIcon && props.numero
+            }
+        </div>
+    );
+};
+
+TarjetaTemporizadora.propTypes = {
+    isIcon: PropTypes.bool,
+    numero: PropTypes.number
+};
+
+export default TarjetaTemporizadora;

src/js/components/TemporizadorDeSegundos.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import PropTypes from "prop-types";
+import TarjetaTemporizadora from "./TarjetaTemporizadora";
+
+function ObtenerSegundosCadena(seconds) {
+    let text = seconds.toString();
+    if (text.length > 6) {
+        return text
+    }
+    return "0".repeat(6-text.length) + text
+
+}
+
+
+const TemporizadorDeSegundos = (props) => {
+    const segundos = ObtenerSegundosCadena(props.segundos)
+    console.log("seconds: " + segundos)
+    return (
+        <>
+            <div className="container-fluid justify-content-center mx-auto d-flex flex-row align-items-center text-center timer-container">
+                <div className="tcard" key="icon">
+                    <TarjetaTemporizadora isIcon={true} />
+                </div>
+                {segundos.split("").map((num, i) => (
+                    <div className="tcard" key={i + 1}>
+                        <TarjetaTemporizadora isIcon={false} numero={Number(num)} />
+                    </div>
+                ))}
+            </div>
+        </>
+    );
+};
+
+TemporizadorDeSegundos.propTypes = {
+    segundos: PropTypes.number
+};
+
+export default TemporizadorDeSegundos;

src/styles/index.css

@@ -9,3 +9,25 @@
     import 'relative/path/to/stylesheet.scss';
 
 */
+
+.timer-container {
+    gap: 50px; 
+    background-color: black;
+}
+
+.timer-container img {
+    height: 85%;
+    width: 100%;
+  }
+
+.TarjetaTemporizadora {
+    color: white;
+    background-color: rgb(42, 42, 42);
+    height: 175px;
+    width: 150px;
+    text-align: center;
+    font-size: 150px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}