import React, { useState, useEffect } from ‘react’;
import { Slider } from ‘@/components/ui/slider’;
import { Card, CardContent, CardHeader, CardTitle } from ‘@/components/ui/card’;
const CalculadoraSolar = () => {
const [consumos, setConsumos] = useState([1000, 1000, 1000, 1000, 1000, 1000]);
const [promedioAnual, setPromedioAnual] = useState(0);
useEffect(() => {
const total = consumos.reduce((acc, curr) => acc + curr, 0);
setPromedioAnual(total / 6);
}, [consumos]);
const handleSliderChange = (index, value) => {
const newConsumos = […consumos];
newConsumos[index] = value[0];
setConsumos(newConsumos);
};
return (
Calculadora Solar
Configuración de Consumo
{consumos.map((consumo, index) => (
handleSliderChange(index, value)}
max={5000}
step={1}
className=”[&>.nui-slider-thumb]:bg-green-500 [&>.nui-slider-track]:bg-green-200 [&>.nui-slider-range]:bg-green-500″
/>
{consumo} kWh
))}
Resumen de Consumo
Consumo promedio anual: {promedioAnual.toFixed(2)} kWh
Consumo promedio mensual: {(promedioAnual / 12).toFixed(2)} kWh
Consumo promedio diario: {(promedioAnual / 365).toFixed(2)} kWh
);
};
export default CalculadoraSolar;
Calculadora Solar con Proyección de Costos
Desglose de Pagos Mensuales
Proyección de Costos a 25 Años