96 lines
3.2 KiB
Plaintext
96 lines
3.2 KiB
Plaintext
package components
|
|
|
|
import "fmt"
|
|
import "github.com/haydenhargreaves/Potion/internal/domain/recipe"
|
|
import domainServer "github.com/haydenhargreaves/Potion/internal/domain/server"
|
|
|
|
templ likeButton() {
|
|
<button class="hover:cursor-pointer">
|
|
<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>
|
|
</button>
|
|
}
|
|
|
|
templ RecipeCardSmall(recipe domain.Recipe) {
|
|
<div class="flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0">
|
|
<img class="size-52 md:size-48 rounded-sm" src=""/>
|
|
<div class="w-full mt-8">
|
|
<h2 class="font-semibold overflow-hidden whitespace-nowrap text-ellipsis">
|
|
{ recipe.Title }
|
|
</h2>
|
|
<p class="text-xs overflow-hidden whitespace-nowrap text-ellipsis">
|
|
Serves { recipe.Serves }
|
|
</p>
|
|
<div class="flex items-end justify-between">
|
|
<p class="text-xs mt-4 bg-gray-200 rounded-lg w-fit px-2 py-1">
|
|
{ recipe.Category } - { recipe.Duration.Total } mins
|
|
</p>
|
|
if recipe.Favorite {
|
|
@likeButton()
|
|
}
|
|
</div>
|
|
<button
|
|
hx-post={ fmt.Sprintf(domainServer.API_ENGAGEMENT_VIEW, recipe.Id) }
|
|
hx-trigger="click"
|
|
hx-swap="none"
|
|
class="w-full rounded-lg py-2 bg-gradient-to-r from-blue-400 to-blue-600 text-white mt-2 hover:ring-blue-700 hover:shadow shadow-blue-300 duration-200 cursor-pointer"
|
|
>
|
|
Make Now!
|
|
</button>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
templ ContentCardSmall(content, target string) {
|
|
<div class="flex flex-col items-center justify-center rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0">
|
|
<div class="mt-8 w-52 md:w-48 text-center">
|
|
<a class="underline" href={ templ.SafeURL(target) }>
|
|
<p class="text-sm">{ content }</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
// TODO: Implement this using a recipe type parameter!
|
|
templ RecipeCardLarge(recipe *domain.Recipe) {
|
|
if recipe != nil {
|
|
<div class="flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0">
|
|
<img class="size-80 rounded-sm" src=""/>
|
|
<div class="w-full mt-8">
|
|
<h2 class="font-semibold overflow-hidden whitespace-nowrap text-ellipsis">
|
|
{ recipe.Title }
|
|
</h2>
|
|
<p class="text-xs overflow-hidden whitespace-nowrap text-ellipsis">
|
|
Serves { recipe.Serves }
|
|
</p>
|
|
<p class="text-sm text-wrap w-80">
|
|
{ recipe.Description }
|
|
</p>
|
|
|
|
<div class="flex items-end justify-between">
|
|
<p class="text-xs mt-4 bg-gray-200 rounded-lg w-fit px-2 py-1">
|
|
{ recipe.Category } - { recipe.Duration.Total } mins
|
|
</p>
|
|
if recipe.Favorite {
|
|
@likeButton()
|
|
}
|
|
</div>
|
|
<button
|
|
hx-post={ fmt.Sprintf(domainServer.API_ENGAGEMENT_VIEW, recipe.Id) }
|
|
hx-trigger="click"
|
|
hx-swap="none"
|
|
class="w-full rounded-lg py-2 bg-gradient-to-r from-blue-400 to-blue-600 text-white mt-2 hover:ring-blue-700 hover:shadow shadow-blue-300 duration-200 cursor-pointer"
|
|
>
|
|
Make Now!
|
|
</button>
|
|
</div>
|
|
</div>
|
|
} else {
|
|
<h2 class="text-2xl md:text-3xl text-gray-400">Coming soon!</h2>
|
|
}
|
|
}
|