Potion/internal/templates/pages/search.templ

package templates

import (
	"fmt"
	"github.com/haydenhargreaves/Potion/internal/domain/recipe"
	domainRecipe "github.com/haydenhargreaves/Potion/internal/domain/recipe"
	domainServer "github.com/haydenhargreaves/Potion/internal/domain/server"
	"github.com/haydenhargreaves/Potion/internal/templates/components"
)

templ SearchPage(filters *domainRecipe.SearchFilters, searchOnLoad bool) {
	@components.Navbar("")
	<div class="w-full flex justify-center">
		<div
			class="mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 min-h-screen border-l border-r border-gray-300 
    bg-white flex flex-col items-center"
		>
			@components.BannerText("Recipe Search")
			@components.SearchBar(filters, false, searchOnLoad, false)
			<hr class="text-gray-300 w-full"/>
			@ResultList(nil)
		</div>
	</div>
}

templ ResultList(recipes []domain.Recipe) {
	<div id="result-list" class="flex flex-col w-full p-4 items-center">
		for _, recipe := range recipes {
			@searchResult(recipe)
		}
		if len(recipes) == 0 || recipes == nil {
			<p class="text-gray-700 text-sm py-4">No results</p>
		} else {
			<p class="text-gray-700 text-sm py-4">End of results</p>
		}
	</div>
}

templ searchResult(recipe domain.Recipe) {
	<div
		hx-post={ fmt.Sprintf(domainServer.API_ENGAGEMENT_VIEW, recipe.Id) }
		hx-trigger="click"
		hx-swap="none"
		class="w-full p-2 border-b border-gray-200 hover:bg-gray-100 duration-200 flex items-center flex-col md:flex-row even:bg-[#f8f8f8] cursor-pointer"
	>
		<img
			class="bg-gray-50 size-56 md:size-40 rounded-md border-0"
			src="/v1/web/static/img/recipe_placeholder.png"
			type="image/png"
		/>
		<div class="text-gray-700 p-4 flex flex-col items-center md:items-start w-full">
			<div class="flex flex-col md:flex-row items-center md:items-start justify-between w-full">
				<div class="flex flex-col items-center md:items-start">
					<h3 class="text-xl font-semibold text-black pb-1">
						{ recipe.Title } <span class="text-sm font-normal hidden md:inline">{ recipe.Category }</span>
					</h3>
					<div class="text-sm flex gap-x-3 gap-y-1 items-center flex-wrap">
						<span class="flex gap-x-1 align-center">
							@timeIconSm()
							{ recipe.Duration.Total } min
						</span>
						<span class="flex gap-x-1 align-center">
							for _ = range(recipe.Difficulty) {
								@starIconSm(true)
							}
							for _ = range(5 - recipe.Difficulty) {
								@starIconSm(false)
							}
						</span>
						<span class="flex gap-x-1 align-center">
							@servingIconSm()
							Serves { recipe.Serves }
						</span>
					</div>
				</div>
				<div class="mb-2 mt-4 md:my-0 hidden md:block">
					if recipe.Favorite {
						<svg class="h-6 text-red-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path
								d="M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z"
								fill="currentColor"
							></path>
						</svg>
					}
				</div>
			</div>
			<p class="text-sm py-2 text-center md:text-left">{ recipe.Description }</p>
		</div>
	</div>
}

templ servingIconSm() {
	<svg
		class="h-5 text-blue-600"
		fill="currentColor"
		version="1.1"
		id="Icons"
		xmlns="http://www.w3.org/2000/svg"
		xmlns:xlink="http://www.w3.org/1999/xlink"
		viewBox="0 0 32 32"
		xml:space="preserve"
	>
		<g>
			<circle cx="12" cy="16" r="5"></circle>
			<path
				d="M12,6C6.5,6,2,10.5,2,16s4.5,10,10,10s10-4.5,10-10S17.5,6,12,6z M12,23c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7
		S15.9,23,12,23z"
			></path>
			<path
				d="M30,10.5V5c0-0.6-0.4-1-1-1s-1,0.4-1,1v5.5c0,0.2,0,0.4,0,0.5h-1V5c0-0.6-0.4-1-1-1s-1,0.4-1,1v6h-1c0-0.2,0-0.4,0-0.5V5
		c0-0.6-0.4-1-1-1s-1,0.4-1,1v5.5c0,1.9,0.5,3.4,1.4,4.3c0.7,0.8,1,1.8,0.9,2.7l-1,7.3c-0.1,0.8,0.1,1.6,0.6,2.2S25.2,28,26,28
		s1.5-0.3,2.1-0.9s0.8-1.4,0.6-2.2l-1-7.3c-0.1-1,0.2-2,0.9-2.8C29.5,13.8,30,12.3,30,10.5z"
			></path>
		</g>
	</svg>
}

templ timeIconSm() {
	<svg class="h-5 text-blue-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path
			d="M12 7V12L14.5 13.5M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
			stroke="currentColor"
			stroke-width="1.5"
			stroke-linecap="round"
			stroke-linejoin="round"
		></path>
	</svg>
}

templ starIconSm(filled bool) {
	if filled {
		<svg class="h-4 text-blue-600" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
			<path
				d="M23.632 9.201a.628.628 0 0 1-.22.678l-5.726 4.96 1.727 7.394a.606.606 0 0 1-.935.676l-6.503-3.953-6.503 3.953a.713.713 0 0 1-.374.112.57.57 0 0 1-.34-.109.629.629 0 0 1-.222-.679l1.729-7.393L.539 9.879A.607.607 0 0 1 .897 8.78l7.536-.635 2.965-7.083a.62.62 0 0 1 1.155.001l2.965 7.082 7.536.635a.63.63 0 0 1 .578.42z"
			></path>
			<path fill="none" d="M0 0h24v24H0z"></path>
		</svg>
	} else {
		<svg class="h-4 text-gray-500" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
			<path
				d="M23.054 8.781l-7.536-.635-2.965-7.082a.619.619 0 0 0-1.155 0L8.433 8.145.896 8.78a.607.607 0 0 0-.357 1.1l5.726 4.96-1.729 7.395a.63.63 0 0 0 .223.679.573.573 0 0 0 .339.108.717.717 0 0 0 .374-.111l6.503-3.954 6.503 3.953a.606.606 0 0 0 .935-.677l-1.727-7.392 5.725-4.96a.607.607 0 0 0-.357-1.099zm-6.48 5.698l1.662 7.113-6.261-3.806-6.262 3.807 1.663-7.114-5.513-4.776 7.257-.611 2.855-6.817 2.855 6.817 7.257.611z"
			></path>
			<path fill="none" d="M0 0h24v24H0z"></path>
		</svg>
	}
}