empty state display for quotes

Author: thejonroberts

app/assets/stylesheets/application.sass.scss

@@ -16,6 +16,7 @@
 @import "components/turbo_progress_bar";
 @import "components/navbar";
 @import "components/flash";
+@import "components/empty_state";
 
 // Layouts
 @import "layouts/container";

app/assets/stylesheets/components/_empty_state.scss

@@ -0,0 +1,21 @@
+.empty-state {
+  padding: var(--space-m);
+  border: var(--border);
+  border-style: dashed;
+  text-align: center;
+
+  &__text {
+    font-size: var(--font-size-l);
+    color: var(--color-text-header);
+    margin-bottom: var(--space-l);
+    font-weight: bold;
+  }
+
+  &--only-child {
+    display: none;
+
+    &:only-child {
+      display: revert;
+    }
+  }
+}

app/views/quotes/_empty_state.html.erb

@@ -0,0 +1,10 @@
+<div class="empty-state empty-state--only-child">
+  <p class="empty-state__text">
+    You don't have any quotes yet!
+  </p>
+
+  <%= link_to "Add quote",
+              new_quote_path,
+              class: "btn btn--primary",
+              data: { turbo_frame: dom_id(Quote.new) } %>
+</div>

app/views/quotes/index.html.erb

@@ -31,6 +31,7 @@ COMMENT
   <%= turbo_stream_from current_company, "quotes" %>
   <%= turbo_frame_tag Quote.new %>
   <%= turbo_frame_tag "quotes" do %>
+    <%= render "quotes/empty_state" %>
     <%= render @quotes %>
   <% end %>
 </main>