119 lines
5.7 KiB
PHP
119 lines
5.7 KiB
PHP
@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>
|