{{-- In this component, we pass both the `name` and its `value` dynamically. The `name` represents the input's identifier, which is crucial for form submission and validation. The `value` corresponds to the actual data that the input holds. Passing these two properties is essential because they allow the component to adapt to varying use cases. Specifically: 1. **Dynamic Handling**: By passing the `name` and `value`, the component can dynamically handle different input fields and their corresponding values. This is particularly useful when dealing with forms where field names and values might change based on the context or user input. 2. **Consistency with API Responses**: Often, the names used for inputs in a form might differ from the keys in API responses. By providing both `name` and `value`, the component ensures that it can correctly map form fields to their respective values even if the API response keys are different. 3. **Flexibility**: This approach offers flexibility in managing forms, making it easier to handle scenarios where field names and values might be dynamically generated or modified. It supports various use cases and ensures that the component remains robust and adaptable. Overall, passing both `name` and `value` helps in maintaining consistency between the form's input fields and the data they represent, facilitating easier data management and interaction. --}} {{-- Default to an empty JSON object to data variable to handle for add form and edit form--}} @props(['title', 'name', 'name-value', 'email', 'email-value', 'phone', 'phone-value', 'data' => '{}'])