65c73bddfa
This may have caught a few. Next I need to actually work on the development/testing/production environment setup.
445 lines
19 KiB
Plaintext
445 lines
19 KiB
Plaintext
package templates
|
|
|
|
import (
|
|
"fmt"
|
|
domain "github.com/haydenhargreaves/Potion/internal/domain/recipe"
|
|
domainServer "github.com/haydenhargreaves/Potion/internal/domain/server"
|
|
domainUser "github.com/haydenhargreaves/Potion/internal/domain/user"
|
|
"github.com/haydenhargreaves/Potion/internal/templates/components"
|
|
"time"
|
|
)
|
|
|
|
templ servingIcon() {
|
|
<svg
|
|
class="h-8 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 timeIcon() {
|
|
<svg class="h-7 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 starIcon(filled bool) {
|
|
if filled {
|
|
<svg class="h-6 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-6 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>
|
|
}
|
|
}
|
|
|
|
templ metadataSection(recipe domain.Recipe) {
|
|
<div
|
|
class="border border-blue-300 bg-blue-50 text-gray-700 mx-4 md:mx-8 rounded-lg flex flex-col
|
|
md:flex-row justify-center items-center py-8"
|
|
>
|
|
<div class="flex flex-col items-center justify-center text-sm my-4 md:my-0 mx-4 w-full md:w-1/4">
|
|
@timeIcon()
|
|
<p>Prep: { recipe.Duration.Prep } min</p>
|
|
<p>Cook: { recipe.Duration.Cook } min</p>
|
|
</div>
|
|
<div
|
|
class="flex flex-col items-center justify-center text-sm my-4 md:my-0 mx-4 border-y md:border-y-0 md:border-x border-blue-300 py-8 w-9/10 md:w-fit md:py-0 px-8"
|
|
>
|
|
<div class="flex gap-x-1 my-2">
|
|
for _ = range recipe.Difficulty {
|
|
@starIcon(true)
|
|
}
|
|
for _ = range (5 - recipe.Difficulty) {
|
|
@starIcon(false)
|
|
}
|
|
</div>
|
|
switch recipe.Difficulty {
|
|
case 1:
|
|
<p>Beginner</p>
|
|
case 2:
|
|
<p>Easy</p>
|
|
case 3:
|
|
<p>Intermediate</p>
|
|
case 4:
|
|
<p>Challenging</p>
|
|
case 5:
|
|
<p>Extreme</p>
|
|
}
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center text-sm my-4 md:my-0 mx-4 w-1/4">
|
|
@servingIcon()
|
|
<p>Serves { recipe.Serves }</p>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
templ ingredientList(ingredients []domain.RecipeIngredient) {
|
|
<div class="px-4 py-8 md:px-8">
|
|
<h2 class="text-2xl text-gray-800 font-semibold mb-2">Ingredients</h2>
|
|
<hr class="text-gray-300"/>
|
|
<ul class="text-lg my-4 text-gray-700">
|
|
for _, ingredient := range ingredients {
|
|
@ingredientListItem(ingredient.Name, ingredient.Quantity)
|
|
}
|
|
</ul>
|
|
</div>
|
|
}
|
|
|
|
templ instructionList(instructions []string) {
|
|
<div class="px-4 py-8 md:px-8">
|
|
<h2 class="text-2xl text-gray-800 font-semibold mb-2">Instructions</h2>
|
|
<hr class="text-gray-300"/>
|
|
<ul class="text-lg my-4 text-gray-700">
|
|
for i, instruction := range instructions {
|
|
@instructionListItem(i+1, instruction)
|
|
}
|
|
</ul>
|
|
</div>
|
|
}
|
|
|
|
templ tagList(tags []domain.Tag, created time.Time, modified *time.Time) {
|
|
<div class="px-4 py-4 md:px-8">
|
|
if len(tags) > 0 {
|
|
<h2 class="text-2xl text-gray-800 font-semibold mb-2">Tags</h2>
|
|
<hr class="text-gray-300"/>
|
|
<ul id="tag-list" class="my-4 flex gap-1 flex-wrap">
|
|
for _, tag := range tags {
|
|
@tagListItem(tag.Name)
|
|
}
|
|
</ul>
|
|
}
|
|
<hr class="text-gray-300"/>
|
|
<p class="my-4 mb-1.5 text-sm text-gray-700">Created: { created.Format("January 2, 2006") }</p>
|
|
if modified != nil {
|
|
<p class="mb-4 text-sm text-gray-700">Last Modified: { modified.Format("January 2, 2006") }</p>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
templ ingredientListItem(name, quantity string) {
|
|
<li
|
|
class="p-2 hover:bg-gray-100 transition-all duration-300 rounded-sm flex items-center justify-start odd:bg-[#f8f8f8]"
|
|
>
|
|
<span class="mr-4">
|
|
<svg class="h-4 text-gray-400" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M21 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="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
></path>
|
|
</svg>
|
|
</span>
|
|
<span class="font-semibold mr-2">{ quantity }: </span> { name }
|
|
</li>
|
|
}
|
|
|
|
templ instructionListItem(num int, content string) {
|
|
<li class="p-4 flex items-start gap-x-4 odd:bg-[#f8f8f8]">
|
|
<div class="size-8 md:size-10 bg-blue-50 rounded-full flex items-center justify-center flex-shrink-0">
|
|
<h3 class="text-base md:text-xl text-blue-600 font-semibold">{ num }</h3>
|
|
</div>
|
|
<p class="text-base">{ content }</p>
|
|
</li>
|
|
}
|
|
|
|
templ tagListItem(content string) {
|
|
<li class="text-sm items-center bg-blue-100 text-blue-700 w-fit px-3 py-1.5 rounded-full">
|
|
{ content }
|
|
</li>
|
|
}
|
|
|
|
templ favoriteButton(favorited bool, id int, loggedIn bool) {
|
|
if favorited {
|
|
<button
|
|
hx-post={ fmt.Sprintf(domainServer.API_ENGAGEMENT_FAVORITE, id) }
|
|
hx-trigger="click"
|
|
hx-swap="none"
|
|
if loggedIn {
|
|
hx-on:click="favoriteButtonHandler();"
|
|
}
|
|
class="flex items-center justify-center gap-x-1 rounded-lg border border-blue-300 bg-blue-50 text-gray-800 px-6 py-3 flex-grow hover:bg-blue-100 hover:border-blue-500 duration-300 cursor-pointer"
|
|
id="favorite-button"
|
|
>
|
|
<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>
|
|
Unfavorite
|
|
</button>
|
|
} else {
|
|
<button
|
|
hx-post={ fmt.Sprintf(domainServer.API_ENGAGEMENT_FAVORITE, id) }
|
|
hx-trigger="click"
|
|
hx-swap="none"
|
|
if loggedIn {
|
|
hx-on:click="favoriteButtonHandler();"
|
|
}
|
|
class="flex items-center justify-center gap-x-1 rounded-lg border border-gray-300 text-gray-800 px-6 py-3 flex-grow hover:bg-gray-50 hover:border-blue-300 duration-300 cursor-pointer"
|
|
id="favorite-button"
|
|
>
|
|
<svg class="h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M12 6.00019C10.2006 3.90317 7.19377 3.2551 4.93923 5.17534C2.68468 7.09558 2.36727 10.3061 4.13778 12.5772C5.60984 14.4654 10.0648 18.4479 11.5249 19.7369C11.6882 19.8811 11.7699 19.9532 11.8652 19.9815C11.9483 20.0062 12.0393 20.0062 12.1225 19.9815C12.2178 19.9532 12.2994 19.8811 12.4628 19.7369C13.9229 18.4479 18.3778 14.4654 19.8499 12.5772C21.6204 10.3061 21.3417 7.07538 19.0484 5.17534C16.7551 3.2753 13.7994 3.90317 12 6.00019Z"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
></path>
|
|
</svg>
|
|
Favorite
|
|
</button>
|
|
}
|
|
}
|
|
|
|
templ madeButton(id int, loggedIn bool) {
|
|
<button
|
|
hx-post={ fmt.Sprintf(domainServer.API_ENGAGEMENT_MAKE, id) }
|
|
hx-trigger="click"
|
|
hx-swap="none"
|
|
id="make-button"
|
|
if loggedIn {
|
|
hx-on:click="makeButtonHandler();"
|
|
}
|
|
class="flex items-center justify-center gap-x-1 rounded-lg border border-gray-300 text-gray-800 px-6 py-3 flex-grow hover:bg-gray-50 hover:border-blue-300 duration-300 cursor-pointer"
|
|
>
|
|
<svg
|
|
class="h-6"
|
|
fill="currentColor"
|
|
viewBox="0 -3.84 122.88 122.88"
|
|
version="1.1"
|
|
id="Layer_1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
style="enable-background:new 0 0 122.88 115.21"
|
|
xml:space="preserve"
|
|
>
|
|
<g>
|
|
<path
|
|
d="M29.03,100.46l20.79-25.21l9.51,12.13L41,110.69C33.98,119.61,20.99,110.21,29.03,100.46L29.03,100.46z M53.31,43.05 c1.98-6.46,1.07-11.98-6.37-20.18L28.76,1c-2.58-3.03-8.66,1.42-6.12,5.09L37.18,24c2.75,3.34-2.36,7.76-5.2,4.32L16.94,9.8 c-2.8-3.21-8.59,1.03-5.66,4.7c4.24,5.1,10.8,13.43,15.04,18.53c2.94,2.99-1.53,7.42-4.43,3.69L6.96,18.32 c-2.19-2.38-5.77-0.9-6.72,1.88c-1.02,2.97,1.49,5.14,3.2,7.34L20.1,49.06c5.17,5.99,10.95,9.54,17.67,7.53 c1.03-0.31,2.29-0.94,3.64-1.77l44.76,57.78c2.41,3.11,7.06,3.44,10.08,0.93l0.69-0.57c3.4-2.83,3.95-8,1.04-11.34L50.58,47.16 C51.96,45.62,52.97,44.16,53.31,43.05L53.31,43.05z M65.98,55.65l7.37-8.94C63.87,23.21,99-8.11,116.03,6.29 C136.72,23.8,105.97,66,84.36,55.57l-8.73,11.09L65.98,55.65L65.98,55.65z"
|
|
></path>
|
|
</g>
|
|
</svg>
|
|
Made This!
|
|
</button>
|
|
}
|
|
|
|
templ shareButton(id int) {
|
|
<button
|
|
id="share-button"
|
|
hx-post={ fmt.Sprintf(domainServer.API_ENGAGEMENT_SHARE, id) }
|
|
hx-trigger="click"
|
|
hx-swap="none"
|
|
hx-on:click="shareButtonHandler();"
|
|
class="flex items-center justify-center gap-x-1 rounded-lg border border-gray-300 text-gray-800 px-6 py-3 flex-grow hover:bg-gray-50 hover:border-blue-300 duration-300 cursor-pointer"
|
|
>
|
|
<svg class="h-7" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M13.803 5.33333C13.803 3.49238 15.3022 2 17.1515 2C19.0008 2 20.5 3.49238 20.5 5.33333C20.5 7.17428 19.0008 8.66667 17.1515 8.66667C16.2177 8.66667 15.3738 8.28596 14.7671 7.67347L10.1317 10.8295C10.1745 11.0425 10.197 11.2625 10.197 11.4872C10.197 11.9322 10.109 12.3576 9.94959 12.7464L15.0323 16.0858C15.6092 15.6161 16.3473 15.3333 17.1515 15.3333C19.0008 15.3333 20.5 16.8257 20.5 18.6667C20.5 20.5076 19.0008 22 17.1515 22C15.3022 22 13.803 20.5076 13.803 18.6667C13.803 18.1845 13.9062 17.7255 14.0917 17.3111L9.05007 13.9987C8.46196 14.5098 7.6916 14.8205 6.84848 14.8205C4.99917 14.8205 3.5 13.3281 3.5 11.4872C3.5 9.64623 4.99917 8.15385 6.84848 8.15385C7.9119 8.15385 8.85853 8.64725 9.47145 9.41518L13.9639 6.35642C13.8594 6.03359 13.803 5.6896 13.803 5.33333Z"
|
|
fill="currentColor"
|
|
></path>
|
|
</svg>
|
|
Share
|
|
</button>
|
|
}
|
|
|
|
templ buttonSection(favorited bool, id int, loggedIn bool) {
|
|
<section class="w-full flex flex-col md:flex-row gap-x-4 gap-y-2 py-8 px-4 md:px-8">
|
|
@favoriteButton(favorited, id, loggedIn)
|
|
@madeButton(id, loggedIn)
|
|
@shareButton(id)
|
|
</section>
|
|
}
|
|
|
|
templ RecipePage(recipe domain.Recipe, user domainUser.User, loggedIn bool, domain string) {
|
|
@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 h-full border-l border-r border-gray-300 bg-white">
|
|
<img class="bg-gray-100 w-full h-96 mx-auto mb-8" src="" alt=""/>
|
|
<div class="px-4 py-8 md:px-8">
|
|
<h1 class="text-3xl md:text-4xl font-bold text-gray-800">{ recipe.Title }</h1>
|
|
<p class="text-sm mt-2 mb-1 text-gray-700">Author: { user.Name }</p>
|
|
<p class="text-sm mb-2 text-gray-700">Category: { recipe.Category }</p>
|
|
</div>
|
|
@metadataSection(recipe)
|
|
@buttonSection(recipe.Favorite, recipe.Id, loggedIn)
|
|
<div class="px-4 py-8 md:px-8">
|
|
<h3 class="text-xl text-gray-800 font-semibold mb-2">About this recipe</h3>
|
|
<p class="text-gray-700">{ recipe.Description }</p>
|
|
</div>
|
|
@ingredientList(recipe.Ingredients)
|
|
@instructionList(recipe.Instructions)
|
|
@tagList(recipe.Tags, recipe.Created, recipe.Modified)
|
|
</div>
|
|
</div>
|
|
@scripts(recipe.Id, domain)
|
|
}
|
|
|
|
templ scripts(id int, domain string) {
|
|
<script>
|
|
function shareButtonHandler() {
|
|
const button = document.getElementById("share-button");
|
|
const before = button.outerHTML;
|
|
|
|
if (navigator.clipboard && navigator.clipboard.writeText) {
|
|
// TODO: Fix this to use the real domain somehow
|
|
const url = "{{ domain }}/v1/web/recipe/{{ id }}"
|
|
navigator.clipboard.writeText(url).then(() => {
|
|
button.outerHTML = `
|
|
<button id="share-button"
|
|
class="flex items-center justify-center gap-x-1 rounded-lg border border-green-500 text-green-500 px-6 py-3 flex-grow hover:bg-gray-50 hover:border-blue-300 duration-300">
|
|
<svg class="h-7" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M13.803 5.33333C13.803 3.49238 15.3022 2 17.1515 2C19.0008 2 20.5 3.49238 20.5 5.33333C20.5 7.17428 19.0008 8.66667 17.1515 8.66667C16.2177 8.66667 15.3738 8.28596 14.7671 7.67347L10.1317 10.8295C10.1745 11.0425 10.197 11.2625 10.197 11.4872C10.197 11.9322 10.109 12.3576 9.94959 12.7464L15.0323 16.0858C15.6092 15.6161 16.3473 15.3333 17.1515 15.3333C19.0008 15.3333 20.5 16.8257 20.5 18.6667C20.5 20.5076 19.0008 22 17.1515 22C15.3022 22 13.803 20.5076 13.803 18.6667C13.803 18.1845 13.9062 17.7255 14.0917 17.3111L9.05007 13.9987C8.46196 14.5098 7.6916 14.8205 6.84848 14.8205C4.99917 14.8205 3.5 13.3281 3.5 11.4872C3.5 9.64623 4.99917 8.15385 6.84848 8.15385C7.9119 8.15385 8.85853 8.64725 9.47145 9.41518L13.9639 6.35642C13.8594 6.03359 13.803 5.6896 13.803 5.33333Z"
|
|
fill="currentColor"></path>
|
|
</svg>
|
|
Link Copied!
|
|
</button>
|
|
`;
|
|
|
|
setTimeout(() => {
|
|
const newButton = document.getElementById("share-button");
|
|
newButton.outerHTML = before;
|
|
}, 2000);
|
|
});
|
|
} else {
|
|
console.warn("Clipboard API not available.");
|
|
|
|
button.outerHTML = `
|
|
<button id="share-button"
|
|
class="flex items-center justify-center gap-x-1 rounded-lg border border-red-500 text-red-500 px-6 py-3 flex-grow hover:bg-gray-50 hover:border-blue-300 duration-300">
|
|
<svg class="h-7" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M13.803 5.33333C13.803 3.49238 15.3022 2 17.1515 2C19.0008 2 20.5 3.49238 20.5 5.33333C20.5 7.17428 19.0008 8.66667 17.1515 8.66667C16.2177 8.66667 15.3738 8.28596 14.7671 7.67347L10.1317 10.8295C10.1745 11.0425 10.197 11.2625 10.197 11.4872C10.197 11.9322 10.109 12.3576 9.94959 12.7464L15.0323 16.0858C15.6092 15.6161 16.3473 15.3333 17.1515 15.3333C19.0008 15.3333 20.5 16.8257 20.5 18.6667C20.5 20.5076 19.0008 22 17.1515 22C15.3022 22 13.803 20.5076 13.803 18.6667C13.803 18.1845 13.9062 17.7255 14.0917 17.3111L9.05007 13.9987C8.46196 14.5098 7.6916 14.8205 6.84848 14.8205C4.99917 14.8205 3.5 13.3281 3.5 11.4872C3.5 9.64623 4.99917 8.15385 6.84848 8.15385C7.9119 8.15385 8.85853 8.64725 9.47145 9.41518L13.9639 6.35642C13.8594 6.03359 13.803 5.6896 13.803 5.33333Z"
|
|
fill="currentColor"></path>
|
|
</svg>
|
|
Failed!
|
|
</button>
|
|
`;
|
|
|
|
setTimeout(() => {
|
|
const newButton = document.getElementById("share-button");
|
|
newButton.outerHTML = before;
|
|
}, 2000);
|
|
}
|
|
}
|
|
|
|
function makeButtonHandler() {
|
|
const button = document.getElementById("make-button");
|
|
|
|
button.outerHTML = `
|
|
<button
|
|
id="make-button"
|
|
class="flex items-center justify-center gap-x-1 rounded-lg border border-blue-500 text-blue-500 px-6 py-3 flex-grow hover:bg-gray-50 hover:border-blue-300 duration-300"
|
|
>
|
|
<svg
|
|
class="h-6"
|
|
fill="currentColor"
|
|
viewBox="0 -3.84 122.88 122.88"
|
|
version="1.1"
|
|
id="Layer_1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
style="enable-background:new 0 0 122.88 115.21"
|
|
xml:space="preserve"
|
|
>
|
|
<g>
|
|
<path
|
|
d="M29.03,100.46l20.79-25.21l9.51,12.13L41,110.69C33.98,119.61,20.99,110.21,29.03,100.46L29.03,100.46z M53.31,43.05 c1.98-6.46,1.07-11.98-6.37-20.18L28.76,1c-2.58-3.03-8.66,1.42-6.12,5.09L37.18,24c2.75,3.34-2.36,7.76-5.2,4.32L16.94,9.8 c-2.8-3.21-8.59,1.03-5.66,4.7c4.24,5.1,10.8,13.43,15.04,18.53c2.94,2.99-1.53,7.42-4.43,3.69L6.96,18.32 c-2.19-2.38-5.77-0.9-6.72,1.88c-1.02,2.97,1.49,5.14,3.2,7.34L20.1,49.06c5.17,5.99,10.95,9.54,17.67,7.53 c1.03-0.31,2.29-0.94,3.64-1.77l44.76,57.78c2.41,3.11,7.06,3.44,10.08,0.93l0.69-0.57c3.4-2.83,3.95-8,1.04-11.34L50.58,47.16 C51.96,45.62,52.97,44.16,53.31,43.05L53.31,43.05z M65.98,55.65l7.37-8.94C63.87,23.21,99-8.11,116.03,6.29 C136.72,23.8,105.97,66,84.36,55.57l-8.73,11.09L65.98,55.65L65.98,55.65z"
|
|
></path>
|
|
</g>
|
|
</svg>
|
|
Made This!
|
|
</button>
|
|
`;
|
|
}
|
|
|
|
function favoriteButtonHandler() {
|
|
const button = document.getElementById("favorite-button");
|
|
|
|
console.log(button.classList);
|
|
console.log(button.classList.contains("border-blue-300"));
|
|
|
|
const toggleClasses = [
|
|
"border-gray-300", "hover:bg-gray-50", "hover:border-blue-300",
|
|
"border-blue-300", "bg-blue-50", "hover:bg-blue-100", "hover:border-blue-500"
|
|
];
|
|
|
|
for (const cls of toggleClasses) {
|
|
console.log("toggling class " + cls);
|
|
button.classList.toggle(cls);
|
|
}
|
|
|
|
if (!button.classList.contains("border-blue-300")) {
|
|
button.innerHTML = `
|
|
<svg class="h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M12 6.00019C10.2006 3.90317 7.19377 3.2551 4.93923 5.17534C2.68468 7.09558 2.36727 10.3061 4.13778 12.5772C5.60984 14.4654 10.0648 18.4479 11.5249 19.7369C11.6882 19.8811 11.7699 19.9532 11.8652 19.9815C11.9483 20.0062 12.0393 20.0062 12.1225 19.9815C12.2178 19.9532 12.2994 19.8811 12.4628 19.7369C13.9229 18.4479 18.3778 14.4654 19.8499 12.5772C21.6204 10.3061 21.3417 7.07538 19.0484 5.17534C16.7551 3.2753 13.7994 3.90317 12 6.00019Z"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
></path>
|
|
</svg>
|
|
Favorite
|
|
`;
|
|
|
|
} else {
|
|
button.innerHTML = `
|
|
<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>
|
|
Unfavorite
|
|
`;
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
}
|