66 lines
3.5 KiB
Twig
66 lines
3.5 KiB
Twig
{# templates/components/MangaSearch.html.twig #}
|
|
|
|
<div {{ attributes }}>
|
|
<div class="w-full mx-auto">
|
|
<div data-controller="search">
|
|
<div class="flex items-center border border-gray-300 rounded bg-white">
|
|
<span class="flex items-center justify-center w-10 h-10 text-gray-500">
|
|
<i class="fas fa-search"></i>
|
|
</span>
|
|
<input data-search-target="input"
|
|
data-model="debounce(500)|query" type="text"
|
|
placeholder="eg. Naruto, Bleach, One Piece"
|
|
class="w-full py-2 px-3 bg-green-50 border-none focus:outline-none focus:bg-white focus:border focus:border-green-200">
|
|
<button data-action="click->search#clearSearch"
|
|
class="flex items-center justify-center w-10 h-10 text-gray-500 hover:bg-gray-200">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if this.mangas %}
|
|
<div data-loading="addClass(opacity-50)" class="mt-3">
|
|
{% for manga in this.mangas %}
|
|
<div class="flex w-full bg-white shadow-lg mb-8 hover:bg-green-50" data-bs-toggle="modal"
|
|
data-bs-target="#mangaModal{{ loop.index }}-{{ manga.slug }}">
|
|
<a href="#" class="flex-none w-48 relative">
|
|
<img src="{{ manga.imageUrl ?? 'https://placehold.co/150x220' }}" alt="{{ manga.title }}"
|
|
class="w-full h-full -z-10 object-cover" style="width: 150px; height: 220px;">
|
|
</a>
|
|
<div class="w-full p-4 flex flex-col justify-between leading-normal">
|
|
<div class="mb-2">
|
|
<div class="flex w-full text-xl font-bold text-gray-900 mb-4 items-center justify-between">
|
|
<div class="flex items-center">
|
|
<span>{{ manga.title }}</span>
|
|
<span class="text-2xl text-gray-500 ml-2">({{ manga.publicationYear }})</span>
|
|
</div>
|
|
<a href="{{ path('app_manga_show', { 'mangaSlug': manga.slug }) }}"
|
|
class="text-gray-400 hover:text-gray-500">
|
|
<i class="fas fa-external-link-alt"></i>
|
|
</a>
|
|
</div>
|
|
{% for genre in manga.genres %}
|
|
<span
|
|
class="bg-gray-200 text-gray-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
|
|
{{ genre }}
|
|
</span>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="mb-2">
|
|
<p class="text-gray-700 text-sm">{{ manga.description|truncate(250) }}</p>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="text-gray-600 text-sm mr-2">
|
|
<i class="fas fa-star text-yellow-500"></i>
|
|
{{ manga.rating }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ component('NewMangaForm', {manga: manga, index: loop.index}) }}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|