Smart Lock Dashboard - Copy this React, Tailwind Component to your project
**Overview of the Smart Lock Dashboard UI** **Main Control Panel:** **Header:** "Smart Lock Control System" – Displayed prominently to indicate the system's purpose. **Lock Status Section:** **Visual Lock Icon:** A large, central icon (either a locked or unlocked padlock) indicates the current status of the smart lock. **Status Border:** The border color around the icon changes (green for locked, red for unlocked) to provide a quick visual cue. **Toggle Button:** Below the icon, a button allows users to remotely lock or unlock the door. The button’s color changes based on the lock status (red when locked, green when unlocked). The button includes an icon and text indicating the action (e.g., "Unlock Door" when locked). **System Status Panel:** **Header:** "System Status" – Provides an overview of the smart lock system’s health and notifications. **Battery Status Section:** **Battery Level Indicator:** Displays the current battery percentage with dynamic text color (green above 60%, yellow between 20% 60%, red below 20%) and a corresponding bar that visualizes the remaining battery level. **Low Battery Warning:** When battery level drops below 20%, an alert icon and warning text appear to notify users to replace the batteries soon. **Recent Alerts Section:** **Alert List:** A scrollable list of recent alerts, each showing a message and timestamp. Alerts provide information about events such as low battery warnings or lock status changes. **Empty State:** If there are no recent alerts, a message indicating "No recent alerts" is shown. **Styling and Aesthetics:** **Color Scheme:** Utilizes a dark theme with gradient backgrounds (from gray to black) to enhance the modern, high tech look. **Backdrop and Panel Styling:** Panels are semi transparent with a blur effect to provide depth. They have rounded corners and a subtle border to distinguish them from the background. **Responsive Design:** Layout adjusts to different screen sizes, ensuring usability on both desktop and mobile devices.
