Add inactive UIUX V2 shared components

2026-07-10 15:38:36 +05:30
parent 2e87013563
commit 3daf9f931d
5 changed files with 282 additions and 0 deletions
@@ -0,0 +1,62 @@
+{#
+  UI/UX V2 Phase 1A — Page header component (INERT UNTIL INCLUDED)
+
+  Expected optional context:
+    page_title_v2 (string)
+    page_description_v2 (string)
+    back_url_v2 (string)
+    back_label_v2 (default "Back")
+    page_actions_v2: list of mappings:
+      label, url, variant(primary|secondary|danger), visible, external
+
+  This component never discovers, moves, hides or rewrites existing page buttons.
+#}
+{% set _title = page_title_v2|default('', true) %}
+{% set _description = page_description_v2|default('', true) %}
+{% set _back_url = back_url_v2|default('', true) %}
+{% set _back_label = back_label_v2|default('Back', true) %}
+{% set _actions = page_actions_v2|default([], true) %}
+
+{% if _title or _description or _back_url or _actions %}
+<header class="space-y-3" data-uiux-v2="page-header">
+  {% if _back_url %}
+    <div>
+      <a href="{{ _back_url }}" class="inline-flex items-center gap-1.5 rounded-lg px-1 py-1 text-sm font-semibold text-slate-600 transition hover:text-brand-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500">
+        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M17 10a.75.75 0 0 1-.75.75H5.56l3.22 3.22a.75.75 0 1 1-1.06 1.06l-4.5-4.5a.75.75 0 0 1 0-1.06l4.5-4.5a.75.75 0 0 1 1.06 1.06L5.56 9.25h10.69A.75.75 0 0 1 17 10Z" clip-rule="evenodd" />
+        </svg>
+        <span>{{ _back_label }}</span>
+      </a>
+    </div>
+  {% endif %}
+
+  <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+    <div class="min-w-0">
+      {% if _title %}
+        <h1 class="text-2xl font-bold tracking-tight text-slate-950 sm:text-3xl">{{ _title }}</h1>
+      {% endif %}
+      {% if _description %}
+        <p class="mt-1 max-w-3xl text-sm leading-6 text-slate-600">{{ _description }}</p>
+      {% endif %}
+    </div>
+
+    {% if _actions %}
+      <div class="flex shrink-0 flex-wrap items-center gap-2" aria-label="Page actions">
+        {% for action in _actions %}
+          {% if action.get('visible', true) %}
+            {% set _variant = action.get('variant', 'secondary') %}
+            {% set _classes = 'bg-brand-600 text-white hover:bg-brand-700 focus-visible:ring-brand-500' if _variant == 'primary' else ('bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500' if _variant == 'danger' else 'border border-slate-300 bg-white text-slate-700 hover:bg-slate-50 hover:text-slate-950 focus-visible:ring-brand-500') %}
+            <a
+              href="{{ action.get('url', '#') }}"
+              class="inline-flex min-h-10 items-center justify-center rounded-xl px-4 py-2 text-sm font-semibold shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 {{ _classes }}"
+              {% if action.get('external', false) %}target="_blank" rel="noopener noreferrer"{% endif %}
+            >
+              {{ action.get('label', '') }}
+            </a>
+          {% endif %}
+        {% endfor %}
+      </div>
+    {% endif %}
+  </div>
+</header>
+{% endif %}