Use consistent + icon buttons on mobile reception views.

Extract shared quick-action and section-link partials so dashboard and visits headers share the same white and purple mobile FABs while section links keep indigo icon buttons. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-28 16:02:23 +00:00
parent 308920d892
commit 6e46b23b2c
4 changed files with 80 additions and 46 deletions
@@ -0,0 +1,24 @@
+@props([
+    'href',
+    'label',
+    'icon',
+    'desktopClass' => 'text-xs font-medium text-indigo-600 hover:text-indigo-700',
+])
+
+<a href="{{ $href }}"
+   aria-label="{{ $label }}"
+   title="{{ $label }}"
+   {{ $attributes->merge(['class' => 'inline-flex h-9 w-9 items-center justify-center rounded-full bg-indigo-50 text-indigo-600 ring-1 ring-indigo-100 transition hover:bg-indigo-100 lg:h-auto lg:w-auto lg:rounded-none lg:bg-transparent lg:ring-0 lg:hover:bg-transparent']) }}>
+    <span class="lg:hidden">
+        @if ($icon === 'shield')
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"/>
+            </svg>
+        @elseif ($icon === 'calendar')
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"/>
+            </svg>
+        @endif
+    </span>
+    <span class="hidden lg:inline {{ $desktopClass }}">{{ $label }}</span>
+</a>
@@ -0,0 +1,33 @@
+@props([
+    'desktopSchedule' => 'Pre-register',
+    'desktopCheckIn' => 'Check in visitor',
+    'scheduleLabel' => 'Pre-register visitor',
+    'checkInLabel' => 'Check in visitor',
+])
+
+<div {{ $attributes->merge(['class' => 'flex shrink-0 items-center gap-2']) }}>
+  <a href="{{ route('frontdesk.visits.schedule') }}"
+     aria-label="{{ $scheduleLabel }}"
+     title="{{ $scheduleLabel }}"
+     class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-700 shadow-sm transition hover:border-slate-300 hover:bg-slate-50 lg:hidden">
+    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
+    </svg>
+  </a>
+  <a href="{{ route('frontdesk.visits.create') }}"
+     aria-label="{{ $checkInLabel }}"
+     title="{{ $checkInLabel }}"
+     class="btn-fab h-10 w-10 lg:hidden">
+    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
+    </svg>
+  </a>
+  <a href="{{ route('frontdesk.visits.schedule') }}"
+     class="hidden items-center rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 lg:inline-flex">
+    {{ $desktopSchedule }}
+  </a>
+  <a href="{{ route('frontdesk.visits.create') }}"
+     class="btn-primary hidden whitespace-nowrap lg:inline-flex">
+    {{ $desktopCheckIn }}
+  </a>
+</div>