set up list management

resources/views/livewire/search-panel.blade.php

@@ -0,0 +1,30 @@
+<x-ui.slide-over model="showSearch">
+    <form wire:submit.prevent="findMovies" class="flex flex-row">
+        <div class="mb-5">
+            <label for="query">Enter a movie title</label>
+            <div class="flex flex-row">
+                <input wire:model="query" type="text" name="query" class="bg-white p-2 text-black"/>
+                <button class="bg-green-400 p-2" type="submit">Search</button>
+            </div>
+            @error('query') <span class="error text-red-500">{{ $message }}</span> @enderror
+        </div>
+
+    </form>
+    <ul class="flex flex-col gap-2">
+        @foreach ($results as $result)
+            <li class="flex flex-row justify-between border border-gray-300 p-2">
+                <div class="flex flex-col gap-1">
+                    <div class="flex flex-col sm:flex-row gap-1 font-bold">
+                        <span>{{ $result['title'] }}</span>
+                        <span>({{$result['year']}})</span>
+                    </div>
+                    <button class="bg-green-400 p-2 rounded w-25 justify-between" type=button
+                            wire:click="addMovie(@js($result['imdb_id']))">
+                        Add to List
+                    </button>
+                </div>
+                <img class="max-h-20" src="{{$result['poster']}}" alt="poster"/>
+            </li>
+        @endforeach
+    </ul>
+</x-ui.slide-over>