chore(search): update search suggestions for desktop

components/ui/search/search.templ

@@ -1,24 +1,25 @@
 package search
 
 templ Search() {
-	<div class="">
+	<div class={ "!text-accent", "!font-MyriadPro", "md:w-[300px]", "xl:w-[500px]" }>
 		<form
-			class="form-control"
+			class={ "w-full" }
 			hx-get="/api/search-suggession"
 			hx-swap="innerHTML"
 			hx-target="#search-results"
 			hx-trigger="keyup"
 		>
 			<input
 				id="search-input"
-				class="input input-bordered"
+				class={ "w-full", "p-[10px]", "ps-[15px]", "rounded-3xl" }
 				type="search"
 				name="query"
 				autofocus
 				autocomplete="off"
+				placeholder="Search for some tunes"
 			/>
 		</form>
-		<div id="search-results"></div>
+		<div class={ "absolute", "md:top-[80px]", "z-10", "md:w-[300px]", "xl:w-[500px]" } id="search-results"></div>
 	</div>
 	//
 	<script lang="javascript">

components/ui/search/search_suggestions.templ

@@ -3,10 +3,10 @@ package search
 import "fmt"
 
 templ SearchSuggestions(suggestions []string, originalQuery string) {
-	<ul id="search-suggestions" class="grid grid-cols-1 w-full">
+	<ul id="search-suggestions" class={ "grid", "grid-cols-1", "w-full", "bg-[#FFFFFFBB]", "rounded-lg", "p-[10px]" }>
 		for i, suggestion := range suggestions {
-			<li class="focus-within:bg-base-300">
-				<a href="https://google.com" class="w-full" id={ fmt.Sprintf("search-suggestion-%d", i) }>
+			<li class={ "focus-within:bg-primary", "focus-within:text-white", "text-lg", "p-1", "rounded" }>
+				<a href="https://google.com" class={ "w-full" } id={ fmt.Sprintf("search-suggestion-%d", i) }>
 					if len(suggestion) <= len(originalQuery) {
 						<span><b>{ suggestion }</b></span>
 					} else {