65 lines
2.1 KiB
HTML
65 lines
2.1 KiB
HTML
{#
|
|
Badge component for status and type indicators.
|
|
|
|
Usage:
|
|
{% from "components/badge.html" import badge, status_badge, type_badge %}
|
|
|
|
{{ badge("Active", "green") }}
|
|
{{ status_badge("completed") }}
|
|
{{ type_badge("EFFECT") }}
|
|
#}
|
|
|
|
{% macro badge(text, color="gray", class="") %}
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-{{ color }}-600/20 text-{{ color }}-400 {{ class }}">
|
|
{{ text }}
|
|
</span>
|
|
{% endmacro %}
|
|
|
|
{% macro status_badge(status, class="") %}
|
|
{% set colors = {
|
|
"completed": "green",
|
|
"cached": "blue",
|
|
"running": "yellow",
|
|
"pending": "gray",
|
|
"failed": "red",
|
|
"active": "green",
|
|
"inactive": "gray",
|
|
} %}
|
|
{% set color = colors.get(status, "gray") %}
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-{{ color }}-600/20 text-{{ color }}-400 {{ class }}">
|
|
{% if status == "running" %}
|
|
<svg class="animate-spin -ml-0.5 mr-1.5 h-3 w-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
{% endif %}
|
|
{{ status | capitalize }}
|
|
</span>
|
|
{% endmacro %}
|
|
|
|
{% macro type_badge(node_type, class="") %}
|
|
{% set colors = {
|
|
"SOURCE": "blue",
|
|
"EFFECT": "green",
|
|
"OUTPUT": "purple",
|
|
"ANALYSIS": "amber",
|
|
"_LIST": "indigo",
|
|
} %}
|
|
{% set color = colors.get(node_type, "gray") %}
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-{{ color }}-600/20 text-{{ color }}-400 {{ class }}">
|
|
{{ node_type }}
|
|
</span>
|
|
{% endmacro %}
|
|
|
|
{% macro role_badge(role, class="") %}
|
|
{% set colors = {
|
|
"input": "blue",
|
|
"output": "purple",
|
|
"intermediate": "gray",
|
|
} %}
|
|
{% set color = colors.get(role, "gray") %}
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-{{ color }}-600/20 text-{{ color }}-400 {{ class }}">
|
|
{{ role | capitalize }}
|
|
</span>
|
|
{% endmacro %}
|