React智能家居能源监控仪表盘

import React from 'react';

const App = () => {
  return (
    <div className="min-h-screen bg-gray-900 text-white p-6">
      <header className="text-center mb-8">
        <h1 className="text-3xl font-bold">Smart Home Energy Monitoring</h1>
      </header>
      <main className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {/* Real-time Metrics */}
        <div className="bg-gray-800 p-4 rounded-lg">
          <h2 className="text-xl font-semibold mb-2">Real-time Metrics</h2>
          <p>Temperature: 22°C</p>
          <p>Voltage: 220V</p>
          <p>Power: 1.5kW</p>
          <p>Load: 75%</p>
        </div>
        {/* Smart Control */}
        <div className="bg-gray-800 p-4 rounded-lg">
          <h2 className="text-xl font-semibold mb-2">Smart Control</h2>
          <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            Turn ON
          </button>
          <button className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded ml-2">
            Turn OFF
          </button>
        </div>
        {/* Barcode Scanner */}
        <div className="bg-gray-800 p-4 rounded-lg">
          <h2 className="text-xl font-semibold mb-2">Barcode Scanner</h2>
          <img src="https://placehold.co/300X300" alt="Barcode Scanner" className="mb-4" />
          <button className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
            Scan Now
          </button>
        </div>
        {/* AI Suggestions */}
        <div className="bg-gray-800 p-4 rounded-lg">
          <h2 className="text-xl font-semibold mb-2">AI Suggestions</h2>
          <p>Optimize energy usage by turning off unused devices.</p>
        </div>
        {/* Energy Usage Chart */}
        <div className="bg-gray-800 p-4 rounded-lg">
          <h2 className="text-xl font-semibold mb-2">Energy Usage</h2>
          <img src="https://placehold.co/300X300" alt="Energy Usage Chart" />
        </div>
        {/* Scheduling UI */}
        <div className="bg-gray-800 p-4 rounded-lg">
          <h2 className="text-xl font-semibold mb-2">Scheduling</h2>
          <p>Set up automation schedules for devices.</p>
        </div>
        {/* AI Chatbot */}
        <div className="bg-gray-800 p-4 rounded-lg">
          <h2 className="text-xl font-semibold mb-2">AI Chatbot</h2>
          <p>Chat with AI for energy-saving tips.</p>
        </div>
      </main>
      <footer className="text-center mt-8">
        <p>© 2025 Smart Home Energy Monitoring. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;