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,38 @@
+{#
+  UI/UX V2 Phase 1A — Breadcrumb component (INERT UNTIL INCLUDED)
+
+  Expected optional context:
+    breadcrumbs_v2: [{"label": "Clients", "url": "/clients"}, ...]
+    breadcrumbs_aria_label_v2: default "Breadcrumb"
+
+  The last item is rendered as the current page even if a URL is supplied.
+#}
+{% set _crumbs = breadcrumbs_v2|default([], true) %}
+{% set _crumb_label = breadcrumbs_aria_label_v2|default('Breadcrumb', true) %}
+
+{% if _crumbs %}
+<nav aria-label="{{ _crumb_label }}" class="min-w-0" data-uiux-v2="breadcrumbs">
+  <ol class="flex min-w-0 items-center gap-1.5 overflow-x-auto whitespace-nowrap text-sm text-slate-500" role="list">
+    {% for crumb in _crumbs %}
+      {% set _is_last = loop.last %}
+      <li class="flex min-w-0 items-center gap-1.5">
+        {% if not loop.first %}
+          <svg class="h-4 w-4 shrink-0 text-slate-300" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 0 1 .02-1.06L11.168 10 7.23 6.29a.75.75 0 1 1 1.04-1.08l4.51 4.25a.75.75 0 0 1 0 1.08l-4.51 4.25a.75.75 0 0 1-1.06-.02Z" clip-rule="evenodd" />
+          </svg>
+        {% endif %}
+
+        {% if not _is_last and crumb.get('url') %}
+          <a href="{{ crumb.get('url') }}" class="max-w-56 truncate rounded px-1 py-0.5 font-medium text-slate-600 hover:text-brand-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500">
+            {{ crumb.get('label', '') }}
+          </a>
+        {% else %}
+          <span class="max-w-64 truncate px-1 py-0.5 font-semibold text-slate-900" {% if _is_last %}aria-current="page"{% endif %}>
+            {{ crumb.get('label', '') }}
+          </span>
+        {% endif %}
+      </li>
+    {% endfor %}
+  </ol>
+</nav>
+{% endif %}