[SearchBar] Create and Integrate Input Filtering with SearchBar

[remixxx31]

Description

• Create a new SearchBar component with an input field to allow filtering of the results obtained.
• Implement in ContentRoot
• Style the SearchBar using Tailwind CSS classes.

Steps:

1. Create a new SearchBar component:

   • Create a ncomponent SearchBar that includes an input field.
   • Use the useState hook to manage the input value.
   • Use the useEffect hook to filter the results based on the input value.

2. Integrate the SearchBar:

   • Import and integrate the SearchBar component into the ContentRoot component.
   • Pass the necessary props to handle filtering logic.

3. Implement filtering logic:

   • Use the input value to filter the list of patients or studies in real-time.
   • Ensure the filtered results are displayed correctly in the AccordionPatient component.

4. Style the SearchBar:

   • Apply Tailwind CSS classes to style the input field and the SearchBar component.
   • Ensure the SearchBar is responsive and visually consistent with the rest of the application.

Checklist

• [ ] Create a SearchBar component with an input field.
• [ ] Implement state management for input value.
• [ ] Integrate the SearchBar component into ContentRoot.
• [ ] Implement filtering logic to update AccordionPatient based on input.
• [ ] Style the SearchBar using Tailwind CSS.
• [ ] Test the SearchBar functionality and responsiveness.