Upload ai-energy-saver.tsx

ai-energy-saver.tsx

@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { 
+  Home, 
+  Thermometer, 
+  Zap, 
+  Lightbulb, 
+  Clock, 
+  Activity 
+} from 'lucide-react';
+
+const AIEnergySaver = () => {
+  // State management for various energy-saving features
+  const [temperature, setTemperature] = useState(72);
+  const [energySavings, setEnergySavings] = useState(0);
+  const [deviceStatus, setDeviceStatus] = useState({
+    lights: false,
+    heating: false,
+    cooling: false,
+    smartAppliances: false
+  });
+
+  // Simulated energy optimization function
+  const optimizeEnergy = () => {
+    // Simulate smart energy-saving adjustments
+    const savedPercentage = Math.floor(Math.random() * 15) + 5; // 5-20% savings
+    setEnergySavings(prev => prev + savedPercentage);
+
+    // Smart device adjustments
+    setDeviceStatus(prev => ({
+      lights: Math.random() > 0.5,
+      heating: temperature > 70 ? false : prev.heating,
+      cooling: temperature < 70 ? false : prev.cooling,
+      smartAppliances: Math.random() > 0.3
+    }));
+  };
+
+  // Temperature adjustment functions
+  const adjustTemperature = (change) => {
+    setTemperature(prev => {
+      const newTemp = prev + change;
+      return Math.max(60, Math.min(newTemp, 80)); // Limit range
+    });
+  };
+
+  return (
+    <div className="p-4 max-w-md mx-auto">
+      <Card className="w-full">
+        <CardHeader className="bg-green-50">
+          <CardTitle className="flex items-center">
+            <Home className="mr-2" /> AI Energy Saver
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4 p-4">
+          {/* Temperature Control */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center">
+              <Thermometer className="mr-2" />
+              <span>Temperature: {temperature}°F</span>
+            </div>
+            <div className="flex space-x-2">
+              <Button 
+                variant="outline" 
+                size="sm" 
+                onClick={() => adjustTemperature(-1)}
+              >
+                -
+              </Button>
+              <Button 
+                variant="outline" 
+                size="sm" 
+                onClick={() => adjustTemperature(1)}
+              >
+                +
+              </Button>
+            </div>
+          </div>
+
+          {/* Energy Savings */}
+          <div className="flex items-center">
+            <Zap className="mr-2" />
+            <span>Total Energy Savings: {energySavings}%</span>
+          </div>
+
+          {/* Device Status */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center">
+                <Lightbulb className="mr-2" />
+                <span>Lights</span>
+              </div>
+              <span 
+                className={`text-sm font-bold ${
+                  deviceStatus.lights ? 'text-green-600' : 'text-red-600'
+                }`}
+              >
+                {deviceStatus.lights ? 'Optimized' : 'Standard'}
+              </span>
+            </div>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center">
+                <Clock className="mr-2" />
+                <span>Smart Appliances</span>
+              </div>
+              <span 
+                className={`text-sm font-bold ${
+                  deviceStatus.smartAppliances ? 'text-green-600' : 'text-red-600'
+                }`}
+              >
+                {deviceStatus.smartAppliances ? 'Active' : 'Inactive'}
+              </span>
+            </div>
+          </div>
+
+          {/* Optimize Button */}
+          <Button 
+            className="w-full" 
+            onClick={optimizeEnergy}
+          >
+            <Activity className="mr-2" />
+            Optimize Energy Usage
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default AIEnergySaver;