21f958a4fb
This includes backend updates as well as frontend changes! The backend also includes a new repository to get a list of jobs via their IDs, which does respect order! The list displays for users that are logged in and a small message when the user is not logged in. The last piece is the recipe of the week segment, which can be as simple as a DB cron-job. But that will require stored procedures. Need to learn those next. Though I want to deploy the application soon, so I need to begin working on that.
91 lines
3.4 KiB
Plaintext
91 lines
3.4 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(liked bool) {
|
|
<div class="w-9/10 md:w-2/5 flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4">
|
|
<img class="size-80 md:size-64 rounded-sm" src=""/>
|
|
<div class="mt-8">
|
|
<h2 class="font-semibold">Avocado Toast</h2>
|
|
<p class="text-xs overflow-hidden whitespace-nowrap text-ellipsis">
|
|
Hayden Hargreaves
|
|
</p>
|
|
<p class="text-sm overflow-hidden [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:4] my-2">
|
|
Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to
|
|
make the BEST avocado toast with this recipe, plus fun variations.
|
|
Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to
|
|
make the BEST avocado toast with this recipe, plus fun variations.
|
|
Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to
|
|
make the BEST avocado toast with this recipe, plus fun variations.
|
|
</p>
|
|
<div class="flex items-center justify-between">
|
|
<p class="text-xs my-2 bg-gray-200 rounded-lg w-fit px-2 py-1 mt-2">
|
|
Breakfast - 15 min
|
|
</p>
|
|
if liked {
|
|
@likeButton()
|
|
}
|
|
</div>
|
|
<button
|
|
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"
|
|
>
|
|
Make Now!
|
|
</button>
|
|
</div>
|
|
</div>
|
|
}
|