Introduce ViewComponent

https://viewcomponent.org

app/components/header_compact_component.html.erb

@@ -0,0 +1,7 @@
+<header class="py-10">
+  <div class="max-w-xl mx-auto px-4 sm:px-6 lg:px-8">
+    <h1 class="text-3xl font-bold text-white text-center">
+      <%= @title %>
+    </h1>
+  </div>
+</header>

app/components/header_compact_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class HeaderCompactComponent < ViewComponent::Base
+  def initialize(title:)
+    @title = title
+  end
+end

app/components/header_component.html.erb

@@ -0,0 +1,7 @@
+<header class="py-10">
+  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+    <h1 class="text-3xl font-bold text-white">
+      <%= @title %>
+    </h1>
+  </div>
+</header>

app/components/header_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class HeaderComponent < ViewComponent::Base
+  def initialize(title:)
+    @title = title
+  end
+end

app/components/main_compact_component.html.erb

@@ -0,0 +1,5 @@
+<main class="w-full max-w-xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
+  <div class="bg-white rounded-lg shadow px-6 py-12 sm:px-12">
+    <%= content %>
+  </div>
+</main>

app/components/main_compact_component.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class MainCompactComponent < ViewComponent::Base
+
+end

app/components/main_simple_component.html.erb

@@ -0,0 +1,5 @@
+<main class="w-full max-w-6xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
+  <div class="bg-white rounded-lg shadow px-6 py-12 sm:px-12">
+    <%= content %>
+  </div>
+</main>

app/components/main_simple_component.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class MainSimpleComponent < ViewComponent::Base
+
+end