56 lines
1.4 KiB
JavaScript
56 lines
1.4 KiB
JavaScript
"use client";
|
|
import React, { useState } from 'react';
|
|
import Tablero from './funciones';
|
|
const Home = () => {
|
|
const [data, setData] = useState({ labels: [], values: [] });
|
|
|
|
const handleClick = () => {
|
|
const rangoX = Number(document.getElementById("rangox").value);
|
|
const xi = Number(document.getElementById("xi").value);
|
|
|
|
// Generar una lista de números desde xi hasta rangoX
|
|
const labels = [];
|
|
const values = [];
|
|
for (let i = xi; i <= rangoX; i++) {
|
|
labels.push(i);
|
|
values.push(i); // Puedes ajustar la función aquí si deseas otros valores
|
|
}
|
|
|
|
setData({ labels, values });
|
|
};
|
|
|
|
return (
|
|
<div className="p-5">
|
|
{/* Entradas */}
|
|
<div className='border-2 p-5 w-60'>
|
|
<h1>Datos:</h1>
|
|
<input
|
|
id="rangox"
|
|
type="number"
|
|
className="border-4 rounded-3xl px-2"
|
|
placeholder='Escribe el límite en X'
|
|
/>
|
|
<br />
|
|
<input
|
|
id="xi"
|
|
type="number"
|
|
className="mt-4 border-4 rounded-3xl px-2"
|
|
placeholder='Escribe el inicio en X'
|
|
/>
|
|
<br />
|
|
<button
|
|
id='btne'
|
|
className='mt-2 px-6 py-1 bg-blue-500 rounded-full text-white font-bold'
|
|
onClick={handleClick}
|
|
>
|
|
Enter
|
|
</button>
|
|
</div>
|
|
{/* Tablero */}
|
|
<Tablero data={data} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Home;
|