Initial commit

resources/views/components/call-card.blade.php

@@ -0,0 +1,118 @@
+@props([
+    'result'          => [],
+    'index'           => 0,
+    'href'            => null,
+    'wireClick'       => null,
+    'showScore'       => false,
+    'showCallable'    => true,
+    'showReactions'    => true,
+    'photoBlur'        => 0,
+    'photoContrast'    => 100,
+    'photoSaturate'    => 100,
+    'photoBrightness'  => 100,
+    'heightClass'      => 'h-[430px] md:h-[550px] lg:h-[430px]',
+    'truncateExcerpt' => false,
+])
+
+<div class="relative flex flex-col justify-end overflow-hidden rounded-lg bg-theme-background shadow-2xl {{ $heightClass }}">
+    @if ($wireClick)
+        <a href="#" wire:click.prevent="{{ $wireClick }}"
+           class="relative flex h-full cursor-pointer flex-col overflow-hidden rounded-lg">
+    @else
+        <a href="{{ $href ?? route('call.show', ['id' => $result['id']]) }}"
+           class="relative flex h-full cursor-pointer flex-col overflow-hidden rounded-lg">
+    @endif
+
+        <!-- Tag category color background -->
+        <div class="absolute inset-0 z-0 bg-{{ $result['tag_color'] ?? 'gray' }}-400"></div>
+        <div class="absolute inset-0 z-10 bg-black/50"></div>
+
+        <!-- Card content -->
+        <div class="relative z-20 flex h-full flex-col justify-between px-6 pt-10 pb-10 lg:px-14 lg:pt-14 lg:pb-14 text-white">
+            <div class="flex-1">
+                <div class="flex items-start justify-between gap-4">
+                    <div class="flex flex-wrap items-center gap-2">
+                        {{-- Deepest tag category badge only --}}
+                        @php $deepestCat = !empty($result['tag_categories']) ? last($result['tag_categories']) : null; @endphp
+                        @if ($deepestCat)
+                            <span class="bg-{{ $deepestCat['color'] ?? 'gray' }}-400 inline-flex items-center rounded-md px-2 py-1 text-sm font-normal text-black">
+                                {{ $deepestCat['name'] }}
+                            </span>
+                        @endif
+                    </div>
+                    {{-- Reaction button --}}
+                    @if ($showReactions)
+                    <div class="flex items-start -m-2 flex-shrink-0">
+                        <div class="-my-3">
+                            @livewire('reaction-button', [
+                                'typeName' => 'like',
+                                'showCounter' => true,
+                                'reactionCounter' => $result['like_count'],
+                                'modelClass' => $result['model'],
+                                'modelId' => $result['id'],
+                                'size' => 'w-6 h-6',
+                                'inverseColors' => true,
+                            ], key('like-' . $result['model'] . '-' . $result['id'] . '-' . $index))
+                        </div>
+                    </div>
+                    @endif
+                </div>
+                <div>
+                    <h2 class="my-3 text-4xl font-semibold leading-tight line-clamp-2">
+                        {{ $result['title'] }}
+                    </h2>
+                    {{-- Location + expiry badges --}}
+                    @if (!empty($result['location']) || !empty($result['expiry_badge_text']))
+                        <div class="mt-3 flex flex-wrap items-center gap-2">
+                            @if (!empty($result['location']))
+                                <h4 class="inline-block items-center rounded-sm bg-black px-2 pb-1 pt-0.5 text-sm font-normal uppercase text-white">
+                                    {{ $result['location'] }}
+                                </h4>
+                            @endif
+                            @if (!empty($result['expiry_badge_text']))
+                                <h4 class="inline-block items-center rounded-sm bg-black px-2 pb-1 pt-0.5 text-sm font-normal uppercase text-white">
+                                    {{ $result['expiry_badge_text'] }}
+                                </h4>
+                            @endif
+                        </div>
+                    @endif
+                    <p class="mt-3 text-base font-semibold {{ $truncateExcerpt ? 'line-clamp-2' : '' }}">
+                        {{ $result['excerpt'] }}
+                    </p>
+                </div>
+            </div>
+
+            @if ($showCallable)
+            <div class="flex flex-wrap items-end gap-4">
+                <div class="flex items-center gap-3">
+                    {{-- Callable avatar --}}
+                    @if (!empty($result['photo']))
+                        <div class="h-16 w-16 flex-shrink-0 rounded-full outline outline-1 outline-offset-1 outline-white/50 overflow-hidden">
+                            <img src="{{ $result['photo'] }}"
+                                 alt="{{ $result['callable_name'] }}"
+                                 class="h-full w-full object-cover" />
+                        </div>
+                    @endif
+                    <div class="flex flex-col gap-1 text-sm">
+                        {{-- Callable name --}}
+                        @if (!empty($result['callable_name']))
+                            <span class="font-medium">{{ $result['callable_name'] }}</span>
+                        @endif
+                        {{-- Callable location --}}
+                        @if (!empty($result['callable_location']))
+                            <span class="text-white/80">{{ $result['callable_location'] }}</span>
+                        @endif
+                    </div>
+                </div>
+            </div>
+            @endif
+        </div>
+
+        @if ($showScore)
+            <div class="text-2xs absolute bottom-5 right-5 z-20 text-transparent sm:text-white drop-shadow">
+                {{ __('search score') . ': ' . round($result['score'] ?? 0, 1) }}
+            </div>
+        @endif
+
+    </a>
+</div>