Added movie search

view/component/search/movies_results.templ

@@ -0,0 +1,44 @@
+package search
+
+import "projectreshoot/tmdb"
+import "fmt"
+
+templ MovieResults(movies *tmdb.ResultMovies, image *tmdb.Image) {
+	for _, movie := range movies.Results {
+		<div
+			class="bg-surface0 p-4 rounded-lg shadow-lg flex 
+            items-start space-x-4"
+		>
+			<img
+				src={ movie.GetPoster(image, "w92") }
+				alt="Movie Poster"
+				class="rounded-lg object-cover"
+				width="96"
+				height="144"
+				onerror="this.onerror=null; setFallbackColor(this);"
+			/>
+			<script>
+                function setFallbackColor(img) {
+                    const baseColor = getComputedStyle(document.documentElement).
+                        getPropertyValue('--base').trim();
+                        img.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='144'%3E%3Crect width='100%' height='100%' fill='${baseColor}'/%3E%3C/svg%3E`;
+                }
+            </script>
+			<div>
+				<a
+					href={ templ.SafeURL(fmt.Sprintf("/movie/%v", movie.ID)) }
+					class="text-xl font-semibold transition hover:text-green"
+				>{ movie.Title } { movie.ReleaseYear() }</a>
+				<p class="text-subtext0">
+					Released: 
+					<span class="font-medium">{ movie.ReleaseDate }</span>
+				</p>
+				<p class="text-subtext0">
+					Original Title: 
+					<span class="font-medium">{ movie.OriginalTitle }</span>
+				</p>
+				<p class="text-subtext0">{ movie.Overview }</p>
+			</div>
+		</div>
+	}
+}

view/page/movie_search.templ

@@ -0,0 +1,31 @@
+package page
+
+import "projectreshoot/view/layout"
+
+templ Movies() {
+	@layout.Global() {
+		<div class="max-w-4xl mx-auto md:mt-0 mt-2 px-2 md:px-0">
+			<form hx-post="/search-movies" hx-target="#search-movies-results">
+				<div
+					class="max-w-100 flex items-center space-x-2 mb-2"
+				>
+					<input
+						id="search"
+						name="search"
+						type="text"
+						placeholder="Search movies..."
+						class="flex-grow p-2 border rounded-lg  
+                        bg-mantle border-surface2 shadow-sm
+                        focus:outline-none focus:ring-2 focus:ring-blue"
+					/>
+					<button
+						type="submit"
+						class="py-2 px-4 bg-green text-mantle rounded-lg transition
+                        hover:cursor-pointer hover:bg-green/75"
+					>Search</button>
+				</div>
+				<div id="search-movies-results" class="space-y-4"></div>
+			</form>
+		</div>
+	}
+}