Electricity Monitor - Copy this React, Tailwind Component to your project

Add these features and place them at the top import React, { useState, useEffect } from "react"; import { FaBatteryThreeQuarters, FaLock, FaUnlock, FaBell, FaExclamationTriangle, FaPowerOff } from "react-icons/fa"; const SmartLockDashboard = () => { const [lockStatus, setLockStatus] = useState(true); const [batteryLevel, setBatteryLevel] = useState(85); const [alerts, setAlerts] = useState([]); const [isLowBattery, setIsLowBattery] = useState(false); useEffect(() => { // Simulate battery drain const batteryInterval = setInterval(() => { setBatteryLevel((prev) => { const newLevel = prev - 1; if (newLevel <= 20) { setIsLowBattery(true); addAlert("Low battery warning! Please replace batteries soon."); } return newLevel > 0 ? newLevel : 0; }); }, 30000); return () => clearInterval(batteryInterval); }, []); const addAlert = (message) => { setAlerts((prev) => [ { id: Date.now(), message, timestamp: new Date().toLocaleString() }, ...prev, ]); }; const toggleLock = () => { setLockStatus((prev) => !prev); addAlert(`Lock ${!lockStatus ? "secured" : "opened"} remotely`); }; const getBatteryColor = () => { if (batteryLevel > 60) return "text-green-500"; if (batteryLevel > 20) return "text-yellow-500"; return "text-red-500"; }; return ( <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 p-4 md:p-8"> <div className="max-w-7xl mx-auto"> <h1 className="text-3xl md:text-4xl font-bold text-white mb-8 text-center"> Smart Lock Control System </h1> <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> {/* Main Control Panel */} <div className="bg-gray-800/50 backdrop-blur-xl rounded-3xl shadow-2xl border border-cyan-500/30 p-6"> <h2 className="text-2xl font-semibold text-white mb-6">Lock Status</h2> <div className="flex flex-col items-center justify-center space-y-6"> <div className="relative"> <div className={`w-48 h-48 rounded-full flex items-center justify-center border-4 ${lockStatus ? "border-green-500" : "border-red-500"} transition-colors duration-300`}> {lockStatus ? ( <FaLock className="text-6xl text-green-500" /> ) : ( <FaUnlock className="text-6xl text-red-500" /> )} </div> </div> <button onClick={toggleLock} className={`flex items-center justify-center space-x-2 px-8 py-4 rounded-full text-white font-semibold transition-all duration-300 ${ lockStatus ? "bg-red-500 hover:bg-red-600" : "bg-green-500 hover:bg-green-600" }`} > <FaPowerOff className="text-xl" /> <span>{lockStatus ? "Unlock Door" : "Lock Door"}</span> </button> </div> </div> {/* Battery and Alerts Panel */} <div className="bg-gray-800/50 backdrop-blur-xl rounded-3xl shadow-2xl border border-cyan-500/30 p-6"> <h2 className="text-2xl font-semibold text-white mb-6">System Status</h2> {/* Battery Status */} <div className="mb-8"> <div className="flex items-center justify-between mb-2"> <span className="text-white">Battery Level</span> <div className="flex items-center"> <FaBatteryThreeQuarters className={`text-2xl mr-2 ${getBatteryColor()}`} /> <span className={`font-bold ${getBatteryColor()}`}>{batteryLevel}%</span> </div> </div> <div className="w-full bg-gray-700 rounded-full h-2.5"> <div className={`h-2.5 rounded-full ${getBatteryColor()}`} style={{ width: `${batteryLevel}%` }} ></div> </div> {isLowBattery && ( <div className="flex items-center text-red-500 mt-2"> <FaExclamationTriangle className="mr-2" /> <span>Low Battery Warning</span> </div> )} </div> {/* Recent Alerts */} <div> <h3 className="text-xl font-semibold text-white mb-4 flex items-center"> <FaBell className="mr-2 text-yellow-500" /> Recent Alerts </h3> <div className="space-y-3 max-h-[200px] overflow-y-auto"> {alerts.map((alert) => ( <div key={alert.id} className="bg-gray-700/50 rounded-lg p-3 border border-gray-600" > <p className="text-white">{alert.message}</p>