Create search bar component and use it in the header

app/assets/stylesheets/components/_search_bar_component.css

@@ -0,0 +1,16 @@
+.search-bar{
+    display: flex;
+    column-gap: 0.5em;
+    background-color: var(--primary-50);
+    padding: 0.5em;
+    border-radius: 0.5em;
+    align-items: center;
+
+    .search-field input{
+        padding-inline: 0.5em;
+        width: 400px;
+        background-color: transparent;
+        border: none;
+        height: 2em;
+    }
+}

app/components/search_bar_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+class SearchBarComponent < ViewComponent::Base
+  include ApplicationHelper
+  erb_template <<-ERB
+    <%# locals: () -%>
+    <%= form_with(url: search_path, method: :get, class: 'search-bar') do |f| %>
+        <div class='search-field'>
+            <%= f.text_field :q, required: true, placeholder: 'Type your search here...'%>
+        </div>
+        <%= render(IconButtonComponent.new(path: 'search', action: :search)) %>
+    <% end %>
+  ERB
+
+  def initialize(
+    search_path:,
+    method: :get,
+    data: { turbo: false },
+    placeholder: 'Type your search here...'
+  )
+    super()
+    @search_path = search_path
+    @method = method
+    @data = data
+    @placeholder = placeholder
+  end
+end

app/views/search/_search-bar.html.erb

@@ -1,10 +1,3 @@
 <%# locals: () -%>
 
-<%= form_with(url: search_path, method: :get) do |f| %>
-    <div>
-        <%= f.text_field :q, required: true, placeholder: 'Type your search here...'%>
-    </div>
-    <%= f.button "search", name: nil do%>
-        <%= svg_icon_tag "icon_search" %>
-    <% end %>
-<% end %>
+<%= render(SearchBarComponent.new(search_path: search_path)) %>

test/components/search_bar_component_test.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+require 'test_helper'
+
+class SearchBarComponentTest < ViewComponent::TestCase
+  def test_component_renders_something_useful
+    # assert_equal(
+    #   %(<span>Hello, components!</span>),
+    #   render_inline(SearchBarComponent.new(message: "Hello, components!")).css("span").to_html
+    # )
+  end
+end