fix: adds status badges

This commit is contained in:
2025-05-12 14:17:22 -05:00
parent 888a030680
commit 8428fc6cf6
6 changed files with 25 additions and 15 deletions

View File

@@ -0,0 +1,10 @@
<?php
namespace App\Twig\Components;
use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
#[AsTwigComponent]
final class StatusBadge
{
}

View File

@@ -1,9 +1,9 @@
<div{{ attributes }}>
<div class="flex flex-col bg-white border border-gray-200 border-t-4 border-t-orange-500 shadow-2xs rounded-xl dark:bg-sky-950 dark:border-neutral-700 dark:border-t-orange-500 dark:shadow-neutral-700/70
dark:backdrop-filter dark:backdrop-blur-md dark:bg-opacity-40
<div class="flex flex-col bg-sky-950 border-neutral-700 border-t-4 border-t-orange-500 rounded-xl
backdrop-filter backdrop-blur-md bg-opacity-40
">
<div class="p-4 md:p-5">
<h3 class="mb-4 text-lg font-bold text-gray-800 dark:text-white">
<h3 class="mb-4 text-lg font-bold text-white">
{{ title }}
</h3>

View File

@@ -26,9 +26,7 @@
<span class="w-4 inline-block text-center text-gray-50">{{ download.progress }}</span>
</span>
{% else %}
<span class="p-1.5 bg-green-600 rounded-full">
<span class="inline-block text-center text-gray-50">Complete</span>
</span>
<twig:StatusBadge color="green" status="Completed" />
{% endif %}
</td>
</tr>

View File

@@ -43,17 +43,11 @@
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
{% if monitor.status == "New" %}
<span class="p-1.5 bg-orange-500 rounded-full">
<span class="w-4 inline-block text-center text-gray-50">{{ monitor.status }}</span>
</span>
<twig:StatusBadge color="orange" status="{{ monitor.status }}" />
{% elseif monitor.status == "In Progress" or monitor.status == "Active" %}
<span class="p-1.5 bg-purple-600 rounded-full">
<span class="inline-block text-center text-gray-50">{{ monitor.status }}</span>
</span>
<twig:StatusBadge color="purple" status="{{ monitor.status }}" />
{% else %}
<span class="p-1.5 bg-green-600 rounded-full">
<span class="inline-block text-center text-gray-50">{{ monitor.status }}</span>
</span>
<twig:StatusBadge color="green" status="{{ monitor.status }}" />
{% endif %}
</td>
</tr>

View File

@@ -0,0 +1,3 @@
<span {{ attributes }} class="py-[3px] px-[8px] bg-{{ color|default('green') }}-600 rounded-lg inline-block text-center text-xs text-gray-50">
{{ status }}
</span>

View File

@@ -0,0 +1,5 @@
{# The status indicator for the Alert button. Rendering this will add a small colored span
to the Alert button, indicating there are unread alerts.
#}
<span style="position: absolute;width: 8px;height: 8px;background: greenyellow;border-radius: 5px; z-index: 1000;margin-left: 3px;margin-top: -5px;"></span>