Configuration Manager - Copy this React, Tailwind Component to your project

{ prompt: ` Design a UI for managing hotel configuration keys (create, display, edit) based on the following structure: [ { "checkinTime": "14:00", "type": "text" }, { "checkoutTime": "12:00", "type": "text" }, { "logo": "", "type": "text" }, { "welcomeMessage": "It is our pleasure to welcome you to our hotel.\nWe will do everything in our power to make your stay\nmost convenient and enjoyable.", "type": "text" } ] ### Functional requirements: 1. **Type Selection**: User selects the type of configuration field they want to create (e.g., "text", "number", "boolean"). 2. **Display Existing Configs**: Display the current configuration fields in a structured table with options to edit or delete them. 3. **Create New Config**: Provide an option to create a new configuration field, where the user can input a key (e.g., `newKey`), select the type (`"text"`), and input the value. 4. **Edit Config Values**: Each row should have an edit button to modify the value of the configuration. 5. **Save Changes**: Allow the user to save changes to the configuration by updating the corresponding JSON object. 6. **Validation**: Ensure that the user inputs valid data based on the type (e.g., text should not be empty). ### UI Layout: 1. **Type Selection Dropdown**: A dropdown menu to select configuration types (text, number, etc.). 2. **Configuration Table**: A table that shows all current keys with columns: "Key", "Type", "Value", "Edit/Delete". 3. **New Config Form**: An input for the key. A dropdown to select the type. An input field to provide the value. 4. **Save Button**: A button to save the new or edited configuration. 5. **Validation**: Highlight fields if the input is invalid, especially when editing or creating new fields. ### Example of configuration types: 1. **Text Field**: A simple input box for text values. 2. **Number Field**: A number input for numeric values. 3. **Boolean Field**: A switch or checkbox for true/false values. ### Interaction flow: 1. User selects "Add New Configuration". 2. User selects type (text, number, etc.). 3. User inputs the key and value. 4. User clicks "Save" to add it to the table. 5. User can edit or delete existing configurations from the table. ` }