46 lines
1.3 KiB
HTML
46 lines
1.3 KiB
HTML
{#
|
|
Card component for displaying information.
|
|
|
|
Usage:
|
|
{% include "components/card.html" with title="Status", content="Active", class="col-span-2" %}
|
|
|
|
Or as a block:
|
|
{% call card(title="Details") %}
|
|
<p>Card content here</p>
|
|
{% endcall %}
|
|
#}
|
|
|
|
{% macro card(title=None, class="") %}
|
|
<div class="bg-dark-600 rounded-lg p-4 {{ class }}">
|
|
{% if title %}
|
|
<h3 class="text-sm font-medium text-gray-400 mb-2">{{ title }}</h3>
|
|
{% endif %}
|
|
<div class="text-white">
|
|
{{ caller() if caller else "" }}
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro stat_card(title, value, color="white", class="") %}
|
|
<div class="bg-dark-600 rounded-lg p-4 text-center {{ class }}">
|
|
<div class="text-2xl font-bold text-{{ color }}-400">{{ value }}</div>
|
|
<div class="text-sm text-gray-400">{{ title }}</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro info_card(title, items, class="") %}
|
|
<div class="bg-dark-600 rounded-lg p-4 {{ class }}">
|
|
{% if title %}
|
|
<h3 class="text-sm font-medium text-gray-400 mb-3">{{ title }}</h3>
|
|
{% endif %}
|
|
<dl class="space-y-2">
|
|
{% for label, value in items %}
|
|
<div class="flex justify-between">
|
|
<dt class="text-gray-400">{{ label }}</dt>
|
|
<dd class="text-white font-mono text-sm">{{ value }}</dd>
|
|
</div>
|
|
{% endfor %}
|
|
</dl>
|
|
</div>
|
|
{% endmacro %}
|