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>
+	}
+}