Skip to content

Commit 438029b

Browse files
joedixonjoedixon
committed
Extract search view
1 parent f8d40d9 commit 438029b

File tree

2 files changed

+37
-36
lines changed

2 files changed

+37
-36
lines changed

‎resources/views/_partials/_search.blade.php‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<div class="max-w-lg w-full lg:max-w-xs" x-data="{ results: [] }">
2+
<label for="search" class="sr-only">Search</label>
3+
<div class="relative">
4+
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
5+
<svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
6+
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
7+
</svg>
8+
</div>
9+
<input
10+
@click.away="results = []"
11+
@keyup="search(event).then(function({ hits }) { results = hits; })"
12+
type="text"
13+
name="search"
14+
id="search"
15+
class="nav-search block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:border-blue-300 focus:shadow-outline-blue sm:text-sm transition duration-150 ease-in-out"
16+
placeholder="Search for threads..."
17+
/>
18+
<template x-if="results.length > 0">
19+
<div x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="mt-2 origin-top-right absolute right-0 w-full rounded-md shadow-lg">
20+
<div class="rounded-md bg-white shadow-xs w-full">
21+
<div class="py-1">
22+
<template x-for="result in results" :key="result.subject">
23+
<a :href="'/forum/'+result.slug" class="block px-4 py-2 text-base leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900">
24+
<span class="block font-bold" x-html="result._highlightResult.subject.value"></span>
25+
<span class="block text-sm txt-gray-400" x-html="result._snippetResult.body.value"></span>
26+
</a>
27+
</template>
28+
<a href="https://algolia.com" class="flex justify-end">
29+
<img src="{{ asset('images/algolia.svg') }}" class="h-4 mx-4 my-2" />
30+
</a>
31+
</div>
32+
</div>
33+
</div>
34+
</template>
35+
</div>
36+
</div>

‎resources/views/layouts/_nav.blade.php‎

Lines changed: 1 addition & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -62,42 +62,7 @@
6262
</div>
6363
</div>
6464
<div class="flex-1 flex items-center justify-center px-2 lg:ml-6 lg:justify-end">
65-
<div class="max-w-lg w-full lg:max-w-xs" x-data="{ results: [] }">
66-
<label for="search" class="sr-only">Search</label>
67-
<div class="relative">
68-
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
69-
<svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
70-
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
71-
</svg>
72-
</div>
73-
<input
74-
@click.away="results = []"
75-
@keyup="search(event).then(function({ hits }) { results = hits; })"
76-
type="text"
77-
name="search"
78-
id="search"
79-
class="nav-search block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:border-blue-300 focus:shadow-outline-blue sm:text-sm transition duration-150 ease-in-out"
80-
placeholder="Search for threads..."
81-
/>
82-
<template x-if="results.length > 0">
83-
<div x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="mt-2 origin-top-right absolute right-0 w-full rounded-md shadow-lg">
84-
<div class="rounded-md bg-white shadow-xs w-full">
85-
<div class="py-1">
86-
<template x-for="result in results" :key="result.subject">
87-
<a :href="'/forum/'+result.slug" class="block px-4 py-2 text-base leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900">
88-
<span class="block font-bold" x-html="result._highlightResult.subject.value"></span>
89-
<span class="block text-sm txt-gray-400" x-html="result._snippetResult.body.value"></span>
90-
</a>
91-
</template>
92-
<a href="https://algolia.com" class="flex justify-end" target="_blank">
93-
<img src="{{ asset('images/algolia.svg') }}" class="h-4 mx-4 my-2" />
94-
</a>
95-
</div>
96-
</div>
97-
</div>
98-
</template>
99-
</div>
100-
</div>
65+
@include('_partials._search')
10166
</div>
10267
<div class="flex items-center lg:hidden">
10368
<button @click="open = !open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">

0 commit comments

Comments
 (0)