Attendance Q R - Copy this React, Tailwind Component to your project

Create a React component using Next.js that enhances the design of an employee attendance system, where users scan a QR code to register their entry and exit times. The component will use the html5 qrcode library for QR code scanning, and it should have a sleek, modern, and user friendly interface. Specifications: Component Structure: AttendanceQR Component: The QR code scanner component that triggers the onScanSuccess callback when a code is successfully scanned. It should render a scanner with a camera preview. Use a maxWidth of 400px for the scanner area to ensure it’s not too large. Display a message indicating the scanning area (e.g., "Scan QR Code to Register Attendance"). AsistenciaPage Component: The page that displays the AttendanceQR component. Title: "Attendance Registration" at the top. A brief description below the title: "Please scan your QR code to register your attendance." Add an alert message when attendance is successfully registered (e.g., "Attendance recorded successfully.") or when there is an error. Use modern UI elements such as buttons and icons. Design Elements: Color Scheme: Use a clean and professional color palette. The background can be light (e.g., light blue or white), and the QR scanner section should have a contrasting color to stand out (e.g., light gray or blue). Fonts: Use readable, modern fonts like Roboto or Arial for clear text. Buttons: Style buttons with rounded corners and a color that aligns with the color scheme. The button to register attendance should be clearly distinguishable, e.g., a green button for success. Layout: Center the QR code scanner and the description text on the page with some padding. Make the design responsive for both mobile and desktop views. Add a subtle shadow around the scanner area to give it a floating effect. Animations/Effects: Provide a smooth fade in effect when the page loads, especially for the QR scanner. Animate the buttons when hovered, making them appear more interactive. If a scan is successful, highlight the scanner area briefly with a glowing effect around it. Error Handling: If scanning fails, show an error message beneath the scanner, prompting the user to try again.