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.
50 lines
1.7 KiB
Plaintext
50 lines
1.7 KiB
Plaintext
<% @page_title = "Projects" %>
|
|
|
|
<% if @projects.count > 0 %>
|
|
<div class="space-y-1">
|
|
<%== render(
|
|
"components/page_header",
|
|
locals: {
|
|
title: "Projects",
|
|
right_items: [render("components/button", locals: { text: "Create Project", link: "project/create" })]
|
|
}
|
|
) %>
|
|
</div>
|
|
|
|
<div class="grid gap-6">
|
|
<div class="overflow-hidden rounded-lg shadow ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200">
|
|
<table class="min-w-full divide-y divide-gray-300">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Name</th>
|
|
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
|
|
<span class="sr-only">Show</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200 bg-white">
|
|
<% @projects.each do |project| %>
|
|
<tr>
|
|
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6" scope="row"><%= project[:name] %></td>
|
|
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
|
|
<a href="<%= project[:path] %>" class="text-orange-600 hover:text-orange-700">Show</a>
|
|
</td>
|
|
</tr>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<% else %>
|
|
<%== render(
|
|
"components/empty_state",
|
|
locals: {
|
|
icon: "hero-folder-open",
|
|
title: "No projects",
|
|
description: "Get started by creating a new project.",
|
|
button_link: "/project/create",
|
|
button_title: "New Project"
|
|
}
|
|
) %>
|
|
<% end %>
|