27d5b59cfc
This effect is seen in the favorites page AND the search page! But of course, only for users that are logged in.
74 lines
3.0 KiB
Plaintext
74 lines
3.0 KiB
Plaintext
package templates
|
|
|
|
import "fmt"
|
|
import "github.com/haydenhargreaves/Potion/internal/templates/components"
|
|
import "github.com/haydenhargreaves/Potion/internal/domain/recipe"
|
|
import domainServer "github.com/haydenhargreaves/Potion/internal/domain/server"
|
|
|
|
templ FavoriteList(recipes []domain.Recipe) {
|
|
<div id="result-list" class="flex flex-col w-full p-4 items-center">
|
|
for _, recipe := range recipes {
|
|
@favoriteResult(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 favoriteResult(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="" />
|
|
<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">
|
|
<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 FavoritesPage(filters domain.SearchFilters) {
|
|
@components.Navbar("favorites")
|
|
<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">
|
|
@components.BannerText("Favorites")
|
|
@components.SearchBar(filters, false, true, true)
|
|
<hr class="text-gray-300 w-full" />
|
|
@FavoriteList(nil)
|
|
</div>
|
|
</div>
|
|
}
|