search stuffs

resources/css/app.css

@@ -1,3 +1,7 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
+
+.search-result em {
+    @apply bg-green-200;
+}

resources/js/app.js

@@ -1,5 +1,15 @@
 require('./bootstrap');
 
+import { MeiliSearch } from 'meilisearch';
+
+window.MeiliSearch = MeiliSearch;
+
+import search from './search';
+
+window.components = {
+    search,
+};
+
 import Vue from 'vue';
 import Turbolinks from 'turbolinks';
 import TurbolinksAdapter from 'vue-turbolinks';

resources/js/search.js

@@ -0,0 +1,36 @@
+export default function (meilisearchConfig, index, searchOptions) {
+    const defaultSearchOptiobns = {
+        limit: 10,
+    };
+
+    searchOptions = { ...defaultSearchOptiobns, ...searchOptions };
+
+    return {
+        query: "",
+        index: null,
+        results: null,
+
+        watchQuery() {
+            this.$watch("query", (query) => {
+                if (query == "") {
+                    this.results = null;
+                    return;
+                }
+
+                this.search(query);
+            });
+        },
+
+        async search(query) {
+            this.results = await this.index.search(query, searchOptions);
+        },
+
+        init() {
+            const client = new window.MeiliSearch(meilisearchConfig);
+
+            this.index = client.index(index);
+
+            this.watchQuery();
+        },
+    };
+}

resources/views/admin/search.blade.php

@@ -0,0 +1,44 @@
+<x-app-layout>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+            {{ __('Dashboard') }}
+        </h2>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
+                <div 
+                x-data="
+                window.components.search({
+                    host: '{{ config('scout.meilisearch.host') }}'
+                }, 'articles', {
+                    limit: 10,
+                    attributesToHighlight: ['title', 'body']
+                })
+                "
+                x-init="init"
+                class="bg-white border-b border-gray-200"
+                >
+                    <x-input id="query" class="block border-none w-full" type="search" name="query"
+                        placeholder="Search for shits.." x-model.debounce.200="query" />
+
+                        <template x-if="results">
+                            <div class="py-2 px-3 border-b border-gray-200 italic">
+                                Found <span x-text="results.nbHits"></span> results
+                            </div>
+                        </template>
+                    
+
+                        <template x-if="results" x-for="hit in results.hits">
+                            <a href="" class="block py-2 px-3 border-b border-gray-200 search-result">
+                                <h1 class="MvWaheed text-xl" x-html="hit._formatted.title"></h1>
+
+                                <p class="MvTyper text-sm" x-html="hit._formatted.body"></p>
+                            </a>
+                        </template>
+                </div>
+            </div>
+        </div>
+    </div>
+</x-app-layout>

resources/views/components/input.blade.php

@@ -0,0 +1,3 @@
+@props(['disabled' => false])
+
+<input {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge(['class' => 'rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50']) !!}>

resources/views/layouts/admin.blade.php

@@ -12,11 +12,17 @@
 
         <!-- Styles -->
         <link rel="stylesheet" href="{{ asset('css/app.css') }}">
+        <link rel="stylesheet" href="/css/styles.css">
 
         @livewireStyles
 
         <!-- Scripts -->
         <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.6.0/dist/alpine.js" defer></script>
+
+        <script src="{{ asset('js/app.js') }}" defer></script>
+        
+
+
     </head>
     <body class="font-sans antialiased">
         <div class="min-h-screen bg-gray-100">

resources/views/navigation-dropdown.blade.php

@@ -28,6 +28,12 @@
                         {{ __('Monitor') }}
                     </x-jet-nav-link>
                 </div>
+
+                <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
+                    <x-jet-nav-link href="/dashboard/search" :active="request()->routeIs('dashboard.search')">
+                        {{ __('Search') }}
+                    </x-jet-nav-link>
+                </div>
             </div>
 
             <!-- Settings Dropdown -->