Potion/internal/templates/pages/recipe.templ

package templates

import "github.com/haydenhargreaves/Potion/internal/templates/components"

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 RecipePage() {
	@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">Easy Chicken Alfredo</h1>
				<p class="text-sm mt-2 mb-1 text-gray-700">Author: Hayden Hargreaves</p>
				<p class="text-sm mb-2 text-gray-700">Category: Dinner</p>
			</div>
			@metadataSection()
			<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">
					A rich and creamy Classic Chicken Curry that's perfect for a comforting weeknight meal.
					Tender chicken pieces are simmered in a luscious, spiced sauce with a hint of coconut, making
					it an irresistible dish for the whole family. This recipe is designed to be straightforward,
					delivering authentic flavors without requiring extensive culinary expertise. Enjoy it with
					fluffy basmati rice or warm naan bread!
				</p>
			</div>
			@ingredientList()
			@instructionList()
			@tagList()
		</div>
	</div>
}

templ metadataSection() {
	<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: 20 min</p>
			<p>Cook: 45 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">
				@starIcon(true)
				@starIcon(true)
				@starIcon(true)
				@starIcon(false)
				@starIcon(false)
			</div>
			<p>Intermediate</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 4</p>
		</div>
	</div>
}

templ ingredientList() {
	<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">
			@ingredientListItem("Chicken breast", "1lb", false)
			@ingredientListItem("Butter", "1/2 cup", true)
			@ingredientListItem("Heavy cream", "1 cup", false)
			@ingredientListItem("Garlic powder", "1/4 tsp", true)
			@ingredientListItem("Chicken breast", "1lb", false)
			@ingredientListItem("Butter", "1/2 cup", true)
			@ingredientListItem("Heavy cream", "1 cup", false)
			@ingredientListItem("Garlic powder", "1/4 tsp", true)
		</ul>
	</div>
}

templ instructionList() {
	<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">
			@instructionListItem(`
    Heat vegetable oil in a large skillet or Dutch oven over medium heat. Add chopped onion
    and cook until softened, about 5 minutes.
    `, 1)
			@instructionListItem(`
    Stir in minced garlic and grated ginger, cooking for another minute until fragrant. Add the curry paste and cook
    for 2-3 minutes, stirring constantly, to toast the spices.
    `, 2)
			@instructionListItem(`
    Add the chicken cubes to the pan and cook until lightly browned on all sides.
    `, 3)
			@instructionListItem(`
    Pour in the coconut milk, stirring to combine everything. Bring to a gentle simmer, then reduce heat to low,
    cover, and cook for 20-25 minutes, or until chicken is cooked through and tender.
    `, 4)
			@instructionListItem(`
    Taste and adjust seasonings if necessary. Garnish with fresh cilantro before serving. Serve hot with basmati
    rice or naan bread.
    `, 5)
		</ul>
	</div>
}

templ tagList() {
	<div class="px-4 py-4 md:px-8">
		<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">
			@tagListItem("healthy")
			@tagListItem("high-protein")
		</ul>
		<hr class="text-gray-300"/>
		<p class="my-4 mb-1.5 text-sm text-gray-700">Created: January 2, 2025</p>
		<p class="mb-4 text-sm text-gray-700">Last Modified: February 14, 2025</p>
	</div>
}

templ ingredientListItem(name, quantity string, odd bool) {
	<li
		if odd {
			class="p-2 hover:bg-gray-100 transition-all duration-300 rounded-sm flex items-center justify-start bg-[#f8f8f8]"
		} else {
			class="p-2 hover:bg-gray-100 transition-all duration-300 rounded-sm flex items-center justify-start"
		}
	>
		<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(content string, num int) {
	<li if num % 2==0 {
	class="p-4 flex items-start gap-x-4 bg-[#f8f8f8]"
} else {
	class="p-4 flex items-start gap-x-4"
}>
		<div class="size-10 bg-blue-50 rounded-full flex items-center justify-center flex-shrink-0">
			<h3 class="text-blue-600 font-semibold">{ num }</h3>
		</div>
		<p class="">{ 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>
}