188760b8d3
We use similar primary and delete buttons in our UI, each with a long list of CSS classes. This redundancy becomes problematic when we want to alter the button style, as changes need to be applied everywhere, making it difficult to maintain. To address this, I created a generic button component. If no link is provided, the `<button>` tag is used in place of the `<a>` tag.
20 lines
943 B
Text
20 lines
943 B
Text
<% description = (defined?(description) && description) ? description : nil %>
|
|
<% button_link = (defined?(button_link) && button_link) ? button_link : nil %>
|
|
<% button_title = (defined?(button_title) && button_title) ? button_title : nil %>
|
|
|
|
<div class="text-center">
|
|
<%== render("components/icon", locals: { name: icon, classes: "mx-auto h-12 w-12 text-gray-400" }) %>
|
|
<h3 class="mt-2 text-sm font-semibold text-gray-900"><%= title %></h3>
|
|
<% if description %>
|
|
<p class="mt-1 text-sm text-gray-500"><%= description %></p>
|
|
<% end %>
|
|
<div class="mt-6">
|
|
<% if button_title %>
|
|
<%== render("components/button", locals: { icon: "hero-plus", link: button_link, text: button_title }) %>
|
|
<% elsif button_title %>
|
|
<div class="flex justify-center">
|
|
<%== render("components/button", locals: { icon: "hero-plus", text: button_title, attributes: { type: "submit" } }) %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|