Code Detail

Prompt

2025年3月26日 19:53

import React, { useState, useEffect } from 'react'; import { View, Text, Switch, StyleSheet } from 'react-native'; export default function SmartHomeEnergySaver() { const [isEnergySaving, setIsEnergySaving] = useState(false); const [energyUsage, setEnergyUsage] = useState(100); // Default energy usage useEffect(() => { if (isEnergySaving) { setEnergyUsage(prevUsage => Math.max(prevUsage * 0.8, 10)); // Reduce energy by 20%, but keep a minimum } else { setEnergyUsage(100); // Reset when mode is off } }, [isEnergySaving]); return ( <View style={styles.container}> <Text style={styles.title}>Smart Home Energy Saver</Text> <Text style={styles.status}>Energy Saving Mode: {isEnergySaving ? 'ON' : 'OFF'}</Text> <Switch value={isEnergySaving} onValueChange={setIsEnergySaving} /> <Text style={styles.energyUsage}>Current Energy Usage: {energyUsage.toFixed(2)} kWh</Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f8f9fa', padding: 20, }, title: { fontSize: 24, fontWeight: 'bold', color: '#0f172a', marginBottom: 20, }, status: { fontSize: 18, color: '#64748b', marginBottom: 10, }, energyUsage: { fontSize: 16, color: '#64748b', marginTop: 20, }, });

Generated Result

import React, { useState, useEffect } from 'react';

const SmartHomeEnergySaver = () => {
  const [isEnergySaving, setIsEnergySaving] = useState(false);
  const [energyUsage, setEnergyUsage] = useState(100);

  useEffect(() => {
    if (isEnergySaving) {
      setEnergyUsage(prevUsage => Math.max(prevUsage * 0.8, 10));
    } else {
      setEnergyUsage(100);
    }
  }, [isEnergySaving]);

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 p-5">
      <h1 className="text-2xl font-bold text-gray-900 mb-5">Smart Home Energy Saver</h1>
      <p className="text-lg text-gray-700 mb-3">Energy Saving Mode: {isEnergySaving ? 'ON' : 'OFF'}</p>
      <div className="mb-5">
        <label className="switch">
          <input type="checkbox" checked={isEnergySaving} onChange={() => setIsEnergySaving(!isEnergySaving)} />
          <span className="slider round"></span>
        </label>
      </div>
      <p className="text-base text-gray-700 mt-5">Current Energy Usage: {energyUsage.toFixed(2)} kWh</p>
    </div>
  );
};

export default SmartHomeEnergySaver;

Open Sandbox