41 lines
2.3 KiB
PHP
41 lines
2.3 KiB
PHP
|
@extends('app')
|
||
|
|
@section('content')
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||
|
|
@foreach($pois as $poi)
|
||
|
|
<div class="flex flex-col mt-6 text-gray-700 bg-white shadow-md bg-clip-border rounded-xl">
|
||
|
|
<div class="relative h-56 overflow-hidden text-white shadow-lg bg-clip-border bg-blue-gray-500 shadow-blue-gray-500/40 rounded-t-xl">
|
||
|
|
<img
|
||
|
|
class="h-full w-full object-cover object-center"
|
||
|
|
src="{{ $poi->titleImage }}"
|
||
|
|
alt="card-image" />
|
||
|
|
|
||
|
|
<!-- bg-green-500 for open, bg-red-500 for closed -->
|
||
|
|
<div class="absolute top-2 right-2 px-2 py-1 text-xs font-bold text-white bg-{{ $poi->isOpen() ? 'green' : 'red' }}-500 rounded-full">
|
||
|
|
{{ $poi->isOpen() ? 'Open' : 'Closed' }}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- bg-blue-500 for wait time, bg-gray-500 with strikethrough if closed -->
|
||
|
|
<div class="absolute top-2 left-2 px-2 py-1 text-xs font-bold text-white bg-{{ $poi->isOpen() ? 'blue' : 'gray' }}-500 rounded-full {{ $poi->isOpen() ? '' : 'line-through' }}">
|
||
|
|
{{ $poi->queueTime() }} min
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="p-6">
|
||
|
|
<h5 class="flex mb-2 font-sans text-xl antialiased font-semibold leading-snug tracking-normal text-blue-gray-900">
|
||
|
|
{{ $poi->title }}
|
||
|
|
</h5>
|
||
|
|
<p class="flex font-sans text-base antialiased font-light leading-relaxed text-inherit">
|
||
|
|
{{ $poi->description }}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="p-6 pt-0">
|
||
|
|
<!-- <button
|
||
|
|
class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-3 px-6 rounded-lg bg-gray-900 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none"
|
||
|
|
type="button">
|
||
|
|
Read More
|
||
|
|
</button> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
@endforeach
|
||
|
|
</div>
|
||
|
|
@endsection
|