Files
projectreshoot/internal/view/component/search/movies_results.templ

45 lines
1.4 KiB
Plaintext

package search
import "projectreshoot/pkg/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>
}
}