Refactor Search Form in Screncasts with SearchComponent

Description:
This commit replaces the search form in app/views/screencasts/index.html.erb with the SearchComponent. The SearchComponent encapsulates the search form logic, making the code more readable and easier to change. It also takes care of HTML escaping the search_term, improving security. The form is now rendered inside a <div> instead of a <span> to follow HTML best practices.

app/views/screencasts/index.html.erb

@@ -1,34 +1,19 @@
 <% content_for :hero do %>
   <%= render "shared/page_title", title: "Screencasts about Ruby and Ruby on Rails", description: "If you're looking for some helpful resources on learning Ruby and Ruby on Rails development, I recommend checking out some screencast tutorials. There's a lot of great information out there that can help you get started and become a better developer. Happy learning!", count: "#{Screencast.count} courses"  %>
 <% end %>
-
 <% content_for :content do %>
   <% if params[:search_term].present? %>
     <div class="pb-12">
       <strong>Search Term: </strong><%= params[:search_term] %>
     </div>
   <% end %>
-
   <div class="flex flex-wrap justify-between mb-8 xl:mb-16 gap-x-8 gap-y-2 md:gap-8">
-    <span>
-      <h2 class="h2 mb-8">All Screencasts</h2>
-    </span>
-
-    <span>
-      <%= form_tag(screencasts_path, method: "get", id: 'search_form', remote: true) do %>
-        <div class="input-group">
-          <span class="input-group-append">
-            <%= text_field_tag(:search_term, nil, placeholder: 'Search name', class: 'form-control', value: html_escape(params[:search_term])) %>    
-          </span>
-          <span class="input-group-append">
-            <button type="submit" class="btn btn-primary button-rounded", id="submit-search-btn", title="Search Screencast">Search</button>
-            <%= link_to screencasts_path, type: :submit, class: "btn btn-warning", id: "clear-search-btn", title: "Reset", style: "margin-left: 10px; color: black" do  %> X <% end %>
-          </span>
-        </div>
-      <% end %>
-    </span>
+    <div>
+      <h2 class="mb-8 h2">All Screencasts</h2>
+    </div>
+    <div>
+      <%= render SearchComponent.new(path: screencasts_path, search_term: params[:search_term]) %>
+    </div>
   </div>
-
   <%= render partial: "screencasts/list", locals: { list: @screencasts } %>
 <% end %>
-