D R P Variable Manager - Copy this React, Tailwind Component to your project

Design a management interface for drpVariables with the following functionalities: List: Display a table listing all drpVariables in the system. Table columns include: Variable Name, Value, Description, Created Time, Updated Time. Provide action buttons for each row: Edit, Delete, and View Detail. Include search functionality and pagination for better navigation. Add (Create New): A form to add a new drpVariable with the following fields: Variable Name (required) Value (required) Description (optional) Include Save and Cancel buttons for user actions. Edit: A form to edit an existing drpVariable with the same fields as the Add form. Pre fill the form with the current details of the selected variable. Include Update and Cancel buttons for user actions. Detail (View): Display detailed information of a specific drpVariable, including all fields: Variable Name, Value, Description, Created Time, Updated Time. Provide an Edit button to navigate to the Edit screen. Additional Requirements: The interface should be user friendly and follow Material Design or Bootstrap standards. Ensure responsiveness for both desktop and mobile devices. Support quick actions via shortcuts, if applicable. Error Handling: Display clear error messages if required fields are left empty or invalid data is entered. Provide confirmation prompts before deleting a drpVariable