Samir Boulahtit
64ab9031d2
Add comprehensive macro library in app/templates/shared/macros/: - pagination.html: pagination(), pagination_simple() - alerts.html: loading_state(), error_state(), alert(), toast() - badges.html: badge(), status_badge(), role_badge(), severity_badge() - buttons.html: btn(), btn_primary(), btn_danger(), action_button() - forms.html: form_input(), form_select(), form_textarea(), form_toggle() - tables.html: table_wrapper(), table_header(), table_empty_state() - cards.html: stat_card(), card(), info_card(), filter_card() - headers.html: page_header(), section_header(), breadcrumbs() These macros standardize TailAdmin styling with Alpine.js integration and dark mode support, reducing code duplication across templates. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
223 lines
8.4 KiB
HTML
223 lines
8.4 KiB
HTML
{#
|
|
Header Macros
|
|
=============
|
|
Reusable page header and navigation components.
|
|
|
|
Usage:
|
|
{% from 'shared/macros/headers.html' import page_header, section_header, breadcrumbs %}
|
|
{{ page_header('User Management', action_label='Create User', action_url='/users/create') }}
|
|
{{ section_header('Account Settings') }}
|
|
{{ breadcrumbs([{'label': 'Home', 'url': '/'}, {'label': 'Users'}]) }}
|
|
#}
|
|
|
|
|
|
{#
|
|
Page Header
|
|
===========
|
|
A page header with title, optional subtitle, and action button.
|
|
|
|
Parameters:
|
|
- title: Page title
|
|
- subtitle: Page subtitle (optional)
|
|
- action_label: Action button text (optional)
|
|
- action_url: Action button URL (optional)
|
|
- action_icon: Action button icon (default: 'plus')
|
|
- action_onclick: JavaScript onclick handler (optional, instead of URL)
|
|
- back_url: Back button URL (optional)
|
|
- back_label: Back button text (default: 'Back')
|
|
#}
|
|
{% macro page_header(title, subtitle=none, action_label=none, action_url=none, action_icon='plus', action_onclick=none, back_url=none, back_label='Back') %}
|
|
<div class="flex items-center justify-between my-6">
|
|
<div>
|
|
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
|
|
{{ title }}
|
|
</h2>
|
|
{% if subtitle %}
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
|
{{ subtitle }}
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
<div class="flex items-center space-x-3">
|
|
{% if back_url %}
|
|
<a href="{{ back_url }}"
|
|
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray">
|
|
<span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
|
|
{{ back_label }}
|
|
</a>
|
|
{% endif %}
|
|
{% if action_label and (action_url or action_onclick) %}
|
|
{% if action_url %}
|
|
<a href="{{ action_url }}"
|
|
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
|
|
<span x-html="$icon('{{ action_icon }}', 'w-4 h-4 mr-2')"></span>
|
|
{{ action_label }}
|
|
</a>
|
|
{% else %}
|
|
<button @click="{{ action_onclick }}"
|
|
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
|
|
<span x-html="$icon('{{ action_icon }}', 'w-4 h-4 mr-2')"></span>
|
|
{{ action_label }}
|
|
</button>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{#
|
|
Page Header (Dynamic)
|
|
=====================
|
|
A page header where the title comes from Alpine.js.
|
|
|
|
Parameters:
|
|
- title_var: Alpine.js variable for the title
|
|
- subtitle_var: Alpine.js variable for subtitle (optional)
|
|
- ... other params same as page_header
|
|
#}
|
|
{% macro page_header_dynamic(title_var, subtitle_var=none, action_label=none, action_url=none, action_icon='plus', back_url=none, back_label='Back') %}
|
|
<div class="flex items-center justify-between my-6">
|
|
<div>
|
|
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200" x-text="{{ title_var }}"></h2>
|
|
{% if subtitle_var %}
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1" x-text="{{ subtitle_var }}"></p>
|
|
{% endif %}
|
|
</div>
|
|
<div class="flex items-center space-x-3">
|
|
{% if back_url %}
|
|
<a href="{{ back_url }}"
|
|
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray">
|
|
<span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
|
|
{{ back_label }}
|
|
</a>
|
|
{% endif %}
|
|
{% if action_label and action_url %}
|
|
<a href="{{ action_url }}"
|
|
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
|
|
<span x-html="$icon('{{ action_icon }}', 'w-4 h-4 mr-2')"></span>
|
|
{{ action_label }}
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{#
|
|
Section Header
|
|
==============
|
|
A section header within a page.
|
|
|
|
Parameters:
|
|
- title: Section title
|
|
- subtitle: Section subtitle (optional)
|
|
- action_label: Action button text (optional)
|
|
- action_onclick: Action button onclick (optional)
|
|
- icon: Section icon (optional)
|
|
#}
|
|
{% macro section_header(title, subtitle=none, action_label=none, action_onclick=none, icon=none) %}
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex items-center">
|
|
{% if icon %}
|
|
<span x-html="$icon('{{ icon }}', 'w-5 h-5 mr-2 text-gray-500')"></span>
|
|
{% endif %}
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">{{ title }}</h3>
|
|
{% if subtitle %}
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">{{ subtitle }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% if action_label and action_onclick %}
|
|
<button @click="{{ action_onclick }}"
|
|
class="px-3 py-1 text-sm font-medium text-purple-600 dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-gray-700 rounded-lg transition-colors">
|
|
{{ action_label }}
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{#
|
|
Breadcrumbs
|
|
===========
|
|
Navigation breadcrumbs.
|
|
|
|
Parameters:
|
|
- items: List of breadcrumb items [{'label': '', 'url': ''}]
|
|
Last item (without url) is treated as current page
|
|
- separator: Separator character (default: '/')
|
|
#}
|
|
{% macro breadcrumbs(items, separator='/') %}
|
|
<nav class="flex mb-6" aria-label="Breadcrumb">
|
|
<ol class="inline-flex items-center space-x-1 md:space-x-2 text-sm">
|
|
{% for item in items %}
|
|
<li class="inline-flex items-center">
|
|
{% if not loop.first %}
|
|
<span class="mx-2 text-gray-400">{{ separator }}</span>
|
|
{% endif %}
|
|
{% if item.url and not loop.last %}
|
|
<a href="{{ item.url }}" class="text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 transition-colors">
|
|
{{ item.label }}
|
|
</a>
|
|
{% else %}
|
|
<span class="text-gray-900 dark:text-gray-200 font-medium">{{ item.label }}</span>
|
|
{% endif %}
|
|
</li>
|
|
{% endfor %}
|
|
</ol>
|
|
</nav>
|
|
{% endmacro %}
|
|
|
|
|
|
{#
|
|
Card Header
|
|
===========
|
|
A header for card sections.
|
|
|
|
Parameters:
|
|
- title: Card header title
|
|
- subtitle: Card header subtitle (optional)
|
|
- class_extra: Additional CSS classes
|
|
#}
|
|
{% macro card_header(title, subtitle=none, class_extra='') %}
|
|
<div class="mb-4 {{ class_extra }}">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">{{ title }}</h3>
|
|
{% if subtitle %}
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">{{ subtitle }}</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{#
|
|
Tab Header
|
|
==========
|
|
A tab navigation header.
|
|
|
|
Parameters:
|
|
- tabs: List of tab items [{'id': '', 'label': '', 'icon': ''}]
|
|
- active_var: Alpine.js variable for active tab
|
|
#}
|
|
{% macro tab_header(tabs, active_var='activeTab') %}
|
|
<div class="border-b border-gray-200 dark:border-gray-700 mb-6">
|
|
<nav class="flex space-x-4" aria-label="Tabs">
|
|
{% for tab in tabs %}
|
|
<button
|
|
@click="{{ active_var }} = '{{ tab.id }}'"
|
|
class="px-4 py-2 text-sm font-medium border-b-2 transition-colors"
|
|
:class="{{ active_var }} === '{{ tab.id }}'
|
|
? 'border-purple-600 text-purple-600 dark:text-purple-400'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
|
|
>
|
|
{% if tab.icon %}
|
|
<span x-html="$icon('{{ tab.icon }}', 'w-4 h-4 inline mr-2')"></span>
|
|
{% endif %}
|
|
{{ tab.label }}
|
|
</button>
|
|
{% endfor %}
|
|
</nav>
|
|
</div>
|
|
{% endmacro %}
|