Dummy Logs - Copy this React, Tailwind Component to your project

Design an interactive UI to display log data with the following requirements: Header: Include a header with a title, e.g., 'Query Logs', and a search bar to filter through logs by name, query, date, or time. Add a button for exporting logs in CSV or PDF format. Log Data Table: Create a table to display log entries with the following columns: Name: Displays the name of the user who made the query. Query: Shows the text of the query made by the user. Date: Indicates the date when the query was made. Time: Displays the time of the query. Ensure each column is sortable and filterable. Provide pagination controls if the number of logs exceeds the viewable limit. Detail View: Include a feature to click on a row to expand and view detailed information about the log entry in a modal or expandable row. UI Design: Use a clean, modern design with clear typography and ample whitespace. Implement a color scheme that enhances readability (e.g., subtle backgrounds, contrasting text). Incorporate interactive elements such as hover effects and collapsible details. Ensure the table is responsive and adapts to different screen sizes. Additional Features: Provide options for sorting logs by date, name, or time. Include a filter option to view logs from a specific date range or user. Allow users to search for specific queries or keywords. Accessibility and Usability: Ensure that the UI is accessible, with clear labels and keyboard navigation support. Test for usability to make sure users can easily interact with the table and find information. This design should offer a user friendly experience for managing and reviewing log data effectively."