(UI/STYLE): Added heart buttons.
Need to work on the search piece, its not amazing right now.
This commit is contained in:
Hayden Hargreaves
parent
d0eae65722
commit
ac00a321d5
@ -38,9 +38,9 @@ well as view lists of recently made recipes, recently viewed and trending recipe
|
||||
|
||||
##### UI Requirements
|
||||
|
||||
- [ ] Welcome Banner
|
||||
- [ ] Video display with large text overhead
|
||||
- [ ] Sub text below the video with a "Call to Action"
|
||||
- [x] Welcome Banner
|
||||
- [x] Video display with large text overhead
|
||||
- [x] Sub text below the video with a "Call to Action"
|
||||
- [ ] Interactive banner that can be hidden with a "Got it!" or "X"
|
||||
|
||||
- [ ] Message & Pills Banner
|
||||
@ -56,22 +56,22 @@ well as view lists of recently made recipes, recently viewed and trending recipe
|
||||
- [ ] **Filter by difficulty** - *1 to 5 stars*
|
||||
- [ ] **Filter by serving size** - *1 to 16*
|
||||
|
||||
- [ ] Recipe of The Week
|
||||
- [ ] **Single recipe display** of the best performing recipe, with spotlight effect
|
||||
- [ ] **Display recipe details in depth** - Title, duration, **image***, meal category, simplified description
|
||||
- [ ] **Make now** button to allow easy access to meal directions
|
||||
- [x] Recipe of The Week
|
||||
- [x] **Single recipe display** of the best performing recipe, with spotlight effect
|
||||
- [x] **Display recipe details in depth** - Title, duration, **image***, meal category, simplified description
|
||||
- [x] **Make now** button to allow easy access to meal directions
|
||||
|
||||
- [ ] Recently Viewed List
|
||||
- [ ] Scrolling list of the most recent 5-10 recipes viewed
|
||||
- [ ] **Display recipe details** - Title, duration, **image***, meal category, and a heart to like the recipe
|
||||
- [x] Recently Viewed List
|
||||
- [x] Scrolling list of the most recent 5-10 recipes viewed
|
||||
- [x] **Display recipe details** - Title, duration, **image***, meal category, and a heart to like the recipe
|
||||
|
||||
- [ ] Make Again List
|
||||
- [ ] Scrolling list of the most recent 5-10 recipes made
|
||||
- [ ] **Display recipe details** - Title, duration, **image***, meal category, and a heart to like the recipe
|
||||
- [x] Make Again List
|
||||
- [x] Scrolling list of the most recent 5-10 recipes made
|
||||
- [x] **Display recipe details** - Title, duration, **image***, meal category, and a heart to like the recipe
|
||||
|
||||
- [ ] Create Recipe CTA (call-to-action)
|
||||
- [ ] **Large CTA banner** with text prompting users to create a recipe
|
||||
- [ ] **Button** to take the user to the create page
|
||||
- [x] Create Recipe CTA (call-to-action)
|
||||
- [x] **Large CTA banner** with text prompting users to create a recipe
|
||||
- [x] **Button** to take the user to the create page
|
||||
|
||||
'*': Not sure yet, still under consideration
|
||||
|
||||
|
||||
@ -3,15 +3,13 @@ package templates
|
||||
import "github.com/haydenhargreaves/Potion/internal/templates/components"
|
||||
|
||||
templ introSection() {
|
||||
<section class="w-full h-fit mb-16">
|
||||
<section class="w-full h-fit mb-16">
|
||||
<div class="relative">
|
||||
<video class="" autoplay loop muted playsinline>
|
||||
<source src="/v1/web/static/img/salmon_video.mp4" type="video/mp4"/>
|
||||
<source src="/v1/web/static/img/salmon_video.mp4" type="video/mp4" />
|
||||
</video>
|
||||
<h1
|
||||
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center
|
||||
text-white text-3xl w-4/5 font-bold z-10"
|
||||
>
|
||||
<h1 class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center
|
||||
text-white text-3xl w-4/5 font-bold z-10">
|
||||
Discover Your Next Favorite Meal
|
||||
</h1>
|
||||
</div>
|
||||
@ -21,49 +19,36 @@ templ introSection() {
|
||||
all at your fingertips. Find exactly what you're craving with our powerful search and intuitive filters, or
|
||||
browse our trending dishes for fresh ideas.
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
}
|
||||
|
||||
templ pillButton(name string) {
|
||||
<button
|
||||
class="w-32 px-4 py-1.5 border-gray-300 border rounded-full hover:border-blue-500 hover:shadow-sm hover:shadow-blue-300 duration-200"
|
||||
>
|
||||
<button
|
||||
class="w-32 px-4 py-1.5 border-gray-300 border rounded-full hover:border-blue-500 hover:shadow-sm hover:shadow-blue-300 duration-200">
|
||||
{ name }
|
||||
</button>
|
||||
</button>
|
||||
}
|
||||
|
||||
templ bannerText(content string) {
|
||||
<h2 class="text-xl md:text-2xl bg-gradient-to-r from-blue-400 to-blue-600 w-full h-fit py-6 text-center text-white">
|
||||
<h2 class="text-xl md:text-2xl bg-gradient-to-r from-blue-400 to-blue-600 w-full h-fit py-6 text-center text-white">
|
||||
{ content }
|
||||
</h2>
|
||||
</h2>
|
||||
}
|
||||
|
||||
templ searchBar() {
|
||||
<div class="relative w-full max-w-xl">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search recipes, ingredients..."
|
||||
class="w-full pr-4 pl-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<svg
|
||||
class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||||
></path>
|
||||
<div class="relative w-full max-w-xl">
|
||||
<input type="text" placeholder="Search recipes, ingredients..."
|
||||
class="w-full pr-4 pl-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
||||
<svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
templ searchSection() {
|
||||
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
|
||||
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
|
||||
@bannerText("Craving Something Specific?")
|
||||
<div class="w-full md:w-2/3 px-4 py-6 bg-gray-50 rounded-lg shadow-md flex flex-col gap-4 items-center my-4">
|
||||
@searchBar()
|
||||
@ -80,11 +65,27 @@ templ searchSection() {
|
||||
Search Recipes
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
}
|
||||
|
||||
templ highlightSection() {
|
||||
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
|
||||
templ largeLikeButton(liked bool) {
|
||||
<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">
|
||||
if liked {
|
||||
<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>
|
||||
} else {
|
||||
<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>
|
||||
</button>
|
||||
}
|
||||
|
||||
templ highlightSection(liked bool) {
|
||||
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
|
||||
@bannerText("Recipe of the Week!")
|
||||
<p class="leading-relaxed p-4 my-8">
|
||||
Our 'Recipe of the Week' is the cream of the crop! We handpick it by looking at what recipes
|
||||
@ -95,17 +96,15 @@ templ highlightSection() {
|
||||
</p>
|
||||
<div class="flex items-center justify-center w-full">
|
||||
<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=""/>
|
||||
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"
|
||||
>
|
||||
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
|
||||
@ -113,25 +112,42 @@ templ highlightSection() {
|
||||
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>
|
||||
@likeButton(liked)
|
||||
</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"
|
||||
>
|
||||
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>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
}
|
||||
|
||||
templ smallRecipeIcon(name, meal, author string) {
|
||||
<div
|
||||
class="w-44 md:w-48 flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0"
|
||||
>
|
||||
<img class="size-32 md:size-32 rounded-sm" src=""/>
|
||||
templ likeButton(liked bool) {
|
||||
<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">
|
||||
if liked {
|
||||
<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>
|
||||
} else {
|
||||
<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>
|
||||
</button>
|
||||
}
|
||||
|
||||
templ smallRecipeIcon(name, meal, author string, liked bool) {
|
||||
<div
|
||||
class="w-44 md:w-48 flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0">
|
||||
<img class="size-32 md:size-32 rounded-sm" src="" />
|
||||
<div class="w-full mt-8">
|
||||
<h2 class="font-semibold overflow-hidden whitespace-nowrap text-ellipsis">
|
||||
{ name }
|
||||
@ -139,46 +155,49 @@ templ smallRecipeIcon(name, meal, author string) {
|
||||
<p class="text-xs overflow-hidden whitespace-nowrap text-ellipsis">
|
||||
{ author }
|
||||
</p>
|
||||
<p class="text-xs mt-4 bg-gray-200 rounded-lg w-fit px-2 py-1">{ meal }</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">
|
||||
{ meal }
|
||||
</p>
|
||||
@likeButton(liked)
|
||||
</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"
|
||||
>
|
||||
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>
|
||||
</div>
|
||||
}
|
||||
|
||||
templ listsSection() {
|
||||
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
|
||||
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
|
||||
@bannerText("Take Another Look.")
|
||||
<div class="w-full">
|
||||
<h3 class="text-lg mt-8 mx-4">Recently viewed</h3>
|
||||
<div class="flex overflow-x-auto gap-x-4 mx-4 my-4">
|
||||
@smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves")
|
||||
@smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves")
|
||||
@smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves")
|
||||
@smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves")
|
||||
@smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves")
|
||||
@smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves")
|
||||
@smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true)
|
||||
@smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false)
|
||||
@smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false)
|
||||
@smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true)
|
||||
@smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false)
|
||||
@smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false)
|
||||
</div>
|
||||
<h3 class="text-lg mt-8 mx-4">Make again</h3>
|
||||
<div class="flex overflow-x-auto gap-x-4 mx-4 my-4">
|
||||
@smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves")
|
||||
@smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves")
|
||||
@smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves")
|
||||
@smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves")
|
||||
@smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves")
|
||||
@smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves")
|
||||
@smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true)
|
||||
@smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false)
|
||||
@smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false)
|
||||
@smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true)
|
||||
@smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false)
|
||||
@smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false)
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
}
|
||||
|
||||
templ ctaSection() {
|
||||
<section
|
||||
class="w-full flex flex-col items-center justify-center mt-16 py-8 md:py-12 bg-gradient-to-br from-blue-100 to-purple-100 text-center"
|
||||
>
|
||||
<section
|
||||
class="w-full flex flex-col items-center justify-center mt-16 py-8 md:py-12 bg-gradient-to-br from-blue-100 to-purple-100 text-center">
|
||||
<h2 class="text-2xl md:text-3xl font-extrabold text-gray-800 mb-6 px-4">
|
||||
Unleash Your Inner Chef!
|
||||
</h2>
|
||||
@ -186,28 +205,25 @@ templ ctaSection() {
|
||||
Have a unique recipe idea? Want to share your culinary masterpiece with the world?
|
||||
It's time to bring your creations to life!
|
||||
</p>
|
||||
<a
|
||||
href="/v1/web/create"
|
||||
class="flex items-center justify-center
|
||||
<a href="/v1/web/create" class="flex items-center justify-center
|
||||
bg-gradient-to-r from-blue-400 to-blue-600 text-white
|
||||
px-12 py-5 rounded-full shadow-sm hover:shadow-md
|
||||
transition-all duration-300 ease-in-out shadow-blue-700
|
||||
text-lg md:text-2xl font-bold uppercase tracking-wide"
|
||||
>
|
||||
text-lg md:text-2xl font-bold uppercase tracking-wide">
|
||||
Create Your Recipe!
|
||||
</a>
|
||||
</section>
|
||||
</section>
|
||||
}
|
||||
|
||||
templ HomePage() {
|
||||
@components.Navbar("home")
|
||||
<div class="w-full h-fit flex justify-center">
|
||||
@components.Navbar("home")
|
||||
<div class="w-full h-fit 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">
|
||||
@introSection()
|
||||
@searchSection()
|
||||
@highlightSection()
|
||||
@highlightSection(false)
|
||||
@listsSection()
|
||||
@ctaSection()
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@ -67,7 +67,7 @@ func pillButton(name string) templ.Component {
|
||||
var templ_7745c5c3_Var3 string
|
||||
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(name)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/home.templ`, Line: 31, Col: 8}
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/home.templ`, Line: 28, Col: 8}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
@ -109,7 +109,7 @@ func bannerText(content string) templ.Component {
|
||||
var templ_7745c5c3_Var5 string
|
||||
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(content)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/home.templ`, Line: 37, Col: 11}
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/home.templ`, Line: 34, Col: 11}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
@ -229,7 +229,7 @@ func searchSection() templ.Component {
|
||||
})
|
||||
}
|
||||
|
||||
func highlightSection() templ.Component {
|
||||
func largeLikeButton(liked bool) templ.Component {
|
||||
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
|
||||
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
|
||||
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
|
||||
@ -250,15 +250,22 @@ func highlightSection() templ.Component {
|
||||
templ_7745c5c3_Var8 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<section class=\"w-full flex flex-col items-center justify-center my-8 py-4\">")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<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\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = bannerText("Recipe of the Week!").Render(ctx, templ_7745c5c3_Buffer)
|
||||
if liked {
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<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>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<p class=\"leading-relaxed p-4 my-8\">Our 'Recipe of the Week' is the cream of the crop! We handpick it by looking at what recipes our community loves most. This isn't just about how many people view a recipe; it's also about how many times it's been made, liked, reviewed, and its average rating, all combined to find the true fan favorite of the week. It's our way of highlighting the best recipes that truly resonate with our users!</p><div class=\"flex items-center justify-center w-full\"><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><p class=\"text-xs my-2 bg-gray-200 rounded-lg w-fit px-2 py-1 mt-2\">Breakfast - 15 min</p><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></div></section>")
|
||||
} else {
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "<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>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</svg></button>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
@ -266,7 +273,7 @@ func highlightSection() templ.Component {
|
||||
})
|
||||
}
|
||||
|
||||
func smallRecipeIcon(name, meal, author string) templ.Component {
|
||||
func highlightSection(liked bool) templ.Component {
|
||||
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
|
||||
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
|
||||
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
|
||||
@ -287,46 +294,143 @@ func smallRecipeIcon(name, meal, author string) templ.Component {
|
||||
templ_7745c5c3_Var9 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "<div class=\"w-44 md:w-48 flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0\"><img class=\"size-32 md:size-32 rounded-sm\" src=\"\"><div class=\"w-full mt-8\"><h2 class=\"font-semibold overflow-hidden whitespace-nowrap text-ellipsis\">")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "<section class=\"w-full flex flex-col items-center justify-center my-8 py-4\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var10 string
|
||||
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(name)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/home.templ`, Line: 137, Col: 10}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
|
||||
templ_7745c5c3_Err = bannerText("Recipe of the Week!").Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</h2><p class=\"text-xs overflow-hidden whitespace-nowrap text-ellipsis\">")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<p class=\"leading-relaxed p-4 my-8\">Our 'Recipe of the Week' is the cream of the crop! We handpick it by looking at what recipes our community loves most. This isn't just about how many people view a recipe; it's also about how many times it's been made, liked, reviewed, and its average rating, all combined to find the true fan favorite of the week. It's our way of highlighting the best recipes that truly resonate with our users!</p><div class=\"flex items-center justify-center w-full\"><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 templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var11 string
|
||||
templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(author)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/home.templ`, Line: 140, Col: 12}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
|
||||
templ_7745c5c3_Err = likeButton(liked).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</p><p class=\"text-xs mt-4 bg-gray-200 rounded-lg w-fit px-2 py-1\">")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</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></div></section>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return nil
|
||||
})
|
||||
}
|
||||
|
||||
func likeButton(liked bool) templ.Component {
|
||||
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
|
||||
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
|
||||
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
|
||||
return templ_7745c5c3_CtxErr
|
||||
}
|
||||
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
defer func() {
|
||||
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err == nil {
|
||||
templ_7745c5c3_Err = templ_7745c5c3_BufErr
|
||||
}
|
||||
}()
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Var10 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var10 == nil {
|
||||
templ_7745c5c3_Var10 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "<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\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
if liked {
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<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>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
} else {
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "<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>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</svg></button>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return nil
|
||||
})
|
||||
}
|
||||
|
||||
func smallRecipeIcon(name, meal, author string, liked bool) templ.Component {
|
||||
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
|
||||
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
|
||||
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
|
||||
return templ_7745c5c3_CtxErr
|
||||
}
|
||||
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
defer func() {
|
||||
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err == nil {
|
||||
templ_7745c5c3_Err = templ_7745c5c3_BufErr
|
||||
}
|
||||
}()
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Var11 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var11 == nil {
|
||||
templ_7745c5c3_Var11 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<div class=\"w-44 md:w-48 flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0\"><img class=\"size-32 md:size-32 rounded-sm\" src=\"\"><div class=\"w-full mt-8\"><h2 class=\"font-semibold overflow-hidden whitespace-nowrap text-ellipsis\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var12 string
|
||||
templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(meal)
|
||||
templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(name)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/home.templ`, Line: 142, Col: 72}
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/home.templ`, Line: 153, Col: 12}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</p><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>")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</h2><p class=\"text-xs overflow-hidden whitespace-nowrap text-ellipsis\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var13 string
|
||||
templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(author)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/home.templ`, Line: 156, Col: 14}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</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\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var14 string
|
||||
templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(meal)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/home.templ`, Line: 160, Col: 14}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "</p>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = likeButton(liked).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</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>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
@ -350,12 +454,12 @@ func listsSection() templ.Component {
|
||||
}()
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Var13 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var13 == nil {
|
||||
templ_7745c5c3_Var13 = templ.NopComponent
|
||||
templ_7745c5c3_Var15 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var15 == nil {
|
||||
templ_7745c5c3_Var15 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<section class=\"w-full flex flex-col items-center justify-center my-8 py-4\">")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "<section class=\"w-full flex flex-col items-center justify-center my-8 py-4\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
@ -363,63 +467,63 @@ func listsSection() templ.Component {
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "<div class=\"w-full\"><h3 class=\"text-lg mt-8 mx-4\">Recently viewed</h3><div class=\"flex overflow-x-auto gap-x-4 mx-4 my-4\">")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "<div class=\"w-full\"><h3 class=\"text-lg mt-8 mx-4\">Recently viewed</h3><div class=\"flex overflow-x-auto gap-x-4 mx-4 my-4\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves").Render(ctx, templ_7745c5c3_Buffer)
|
||||
templ_7745c5c3_Err = smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves").Render(ctx, templ_7745c5c3_Buffer)
|
||||
templ_7745c5c3_Err = smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves").Render(ctx, templ_7745c5c3_Buffer)
|
||||
templ_7745c5c3_Err = smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves").Render(ctx, templ_7745c5c3_Buffer)
|
||||
templ_7745c5c3_Err = smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves").Render(ctx, templ_7745c5c3_Buffer)
|
||||
templ_7745c5c3_Err = smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves").Render(ctx, templ_7745c5c3_Buffer)
|
||||
templ_7745c5c3_Err = smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</div><h3 class=\"text-lg mt-8 mx-4\">Make again</h3><div class=\"flex overflow-x-auto gap-x-4 mx-4 my-4\">")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "</div><h3 class=\"text-lg mt-8 mx-4\">Make again</h3><div class=\"flex overflow-x-auto gap-x-4 mx-4 my-4\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves").Render(ctx, templ_7745c5c3_Buffer)
|
||||
templ_7745c5c3_Err = smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves").Render(ctx, templ_7745c5c3_Buffer)
|
||||
templ_7745c5c3_Err = smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves").Render(ctx, templ_7745c5c3_Buffer)
|
||||
templ_7745c5c3_Err = smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves").Render(ctx, templ_7745c5c3_Buffer)
|
||||
templ_7745c5c3_Err = smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves").Render(ctx, templ_7745c5c3_Buffer)
|
||||
templ_7745c5c3_Err = smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves").Render(ctx, templ_7745c5c3_Buffer)
|
||||
templ_7745c5c3_Err = smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "</div></div></section>")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "</div></div></section>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
@ -443,12 +547,12 @@ func ctaSection() templ.Component {
|
||||
}()
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Var14 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var14 == nil {
|
||||
templ_7745c5c3_Var14 = templ.NopComponent
|
||||
templ_7745c5c3_Var16 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var16 == nil {
|
||||
templ_7745c5c3_Var16 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<section class=\"w-full flex flex-col items-center justify-center mt-16 py-8 md:py-12 bg-gradient-to-br from-blue-100 to-purple-100 text-center\"><h2 class=\"text-2xl md:text-3xl font-extrabold text-gray-800 mb-6 px-4\">Unleash Your Inner Chef!</h2><p class=\"text-md md:text-lg text-gray-700 max-w-2xl mb-10 px-4 leading-relaxed\">Have a unique recipe idea? Want to share your culinary masterpiece with the world? It's time to bring your creations to life!</p><a href=\"/v1/web/create\" class=\"flex items-center justify-center\n bg-gradient-to-r from-blue-400 to-blue-600 text-white\n px-12 py-5 rounded-full shadow-sm hover:shadow-md\n transition-all duration-300 ease-in-out shadow-blue-700\n text-lg md:text-2xl font-bold uppercase tracking-wide\">Create Your Recipe!</a></section>")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "<section class=\"w-full flex flex-col items-center justify-center mt-16 py-8 md:py-12 bg-gradient-to-br from-blue-100 to-purple-100 text-center\"><h2 class=\"text-2xl md:text-3xl font-extrabold text-gray-800 mb-6 px-4\">Unleash Your Inner Chef!</h2><p class=\"text-md md:text-lg text-gray-700 max-w-2xl mb-10 px-4 leading-relaxed\">Have a unique recipe idea? Want to share your culinary masterpiece with the world? It's time to bring your creations to life!</p><a href=\"/v1/web/create\" class=\"flex items-center justify-center\n bg-gradient-to-r from-blue-400 to-blue-600 text-white\n px-12 py-5 rounded-full shadow-sm hover:shadow-md\n transition-all duration-300 ease-in-out shadow-blue-700\n text-lg md:text-2xl font-bold uppercase tracking-wide\">Create Your Recipe!</a></section>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
@ -472,16 +576,16 @@ func HomePage() templ.Component {
|
||||
}()
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Var15 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var15 == nil {
|
||||
templ_7745c5c3_Var15 = templ.NopComponent
|
||||
templ_7745c5c3_Var17 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var17 == nil {
|
||||
templ_7745c5c3_Var17 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
templ_7745c5c3_Err = components.Navbar("home").Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<div class=\"w-full h-fit 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\">")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "<div class=\"w-full h-fit 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\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
@ -493,7 +597,7 @@ func HomePage() templ.Component {
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = highlightSection().Render(ctx, templ_7745c5c3_Buffer)
|
||||
templ_7745c5c3_Err = highlightSection(false).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
@ -505,7 +609,7 @@ func HomePage() templ.Component {
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</div></div>")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "</div></div>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
|
||||
@ -248,9 +248,6 @@
|
||||
.mx-4 {
|
||||
margin-inline: calc(var(--spacing) * 4);
|
||||
}
|
||||
.mx-8 {
|
||||
margin-inline: calc(var(--spacing) * 8);
|
||||
}
|
||||
.my-2 {
|
||||
margin-block: calc(var(--spacing) * 2);
|
||||
}
|
||||
@ -260,9 +257,6 @@
|
||||
.my-8 {
|
||||
margin-block: calc(var(--spacing) * 8);
|
||||
}
|
||||
.my-16 {
|
||||
margin-block: calc(var(--spacing) * 16);
|
||||
}
|
||||
.mt-2 {
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
}
|
||||
@ -278,12 +272,6 @@
|
||||
.mt-16 {
|
||||
margin-top: calc(var(--spacing) * 16);
|
||||
}
|
||||
.mr-3 {
|
||||
margin-right: calc(var(--spacing) * 3);
|
||||
}
|
||||
.mb-2 {
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
.mb-6 {
|
||||
margin-bottom: calc(var(--spacing) * 6);
|
||||
}
|
||||
@ -318,42 +306,10 @@
|
||||
width: calc(var(--spacing) * 5);
|
||||
height: calc(var(--spacing) * 5);
|
||||
}
|
||||
.size-6 {
|
||||
width: calc(var(--spacing) * 6);
|
||||
height: calc(var(--spacing) * 6);
|
||||
}
|
||||
.size-7 {
|
||||
width: calc(var(--spacing) * 7);
|
||||
height: calc(var(--spacing) * 7);
|
||||
}
|
||||
.size-8 {
|
||||
width: calc(var(--spacing) * 8);
|
||||
height: calc(var(--spacing) * 8);
|
||||
}
|
||||
.size-9 {
|
||||
width: calc(var(--spacing) * 9);
|
||||
height: calc(var(--spacing) * 9);
|
||||
}
|
||||
.size-24 {
|
||||
width: calc(var(--spacing) * 24);
|
||||
height: calc(var(--spacing) * 24);
|
||||
}
|
||||
.size-28 {
|
||||
width: calc(var(--spacing) * 28);
|
||||
height: calc(var(--spacing) * 28);
|
||||
}
|
||||
.size-32 {
|
||||
width: calc(var(--spacing) * 32);
|
||||
height: calc(var(--spacing) * 32);
|
||||
}
|
||||
.size-64 {
|
||||
width: calc(var(--spacing) * 64);
|
||||
height: calc(var(--spacing) * 64);
|
||||
}
|
||||
.size-72 {
|
||||
width: calc(var(--spacing) * 72);
|
||||
height: calc(var(--spacing) * 72);
|
||||
}
|
||||
.size-80 {
|
||||
width: calc(var(--spacing) * 80);
|
||||
height: calc(var(--spacing) * 80);
|
||||
@ -364,11 +320,8 @@
|
||||
.h-5 {
|
||||
height: calc(var(--spacing) * 5);
|
||||
}
|
||||
.h-7 {
|
||||
height: calc(var(--spacing) * 7);
|
||||
}
|
||||
.h-96 {
|
||||
height: calc(var(--spacing) * 96);
|
||||
.h-6 {
|
||||
height: calc(var(--spacing) * 6);
|
||||
}
|
||||
.h-auto {
|
||||
height: auto;
|
||||
@ -382,21 +335,6 @@
|
||||
.h-screen {
|
||||
height: 100vh;
|
||||
}
|
||||
.w-1 {
|
||||
width: calc(var(--spacing) * 1);
|
||||
}
|
||||
.w-1\/4 {
|
||||
width: calc(1/4 * 100%);
|
||||
}
|
||||
.w-1\/5 {
|
||||
width: calc(1/5 * 100%);
|
||||
}
|
||||
.w-2 {
|
||||
width: calc(var(--spacing) * 2);
|
||||
}
|
||||
.w-2\/5 {
|
||||
width: calc(2/5 * 100%);
|
||||
}
|
||||
.w-3 {
|
||||
width: calc(var(--spacing) * 3);
|
||||
}
|
||||
@ -412,30 +350,18 @@
|
||||
.w-5 {
|
||||
width: calc(var(--spacing) * 5);
|
||||
}
|
||||
.w-7 {
|
||||
width: calc(var(--spacing) * 7);
|
||||
}
|
||||
.w-9 {
|
||||
width: calc(var(--spacing) * 9);
|
||||
}
|
||||
.w-9\/10 {
|
||||
width: calc(9/10 * 100%);
|
||||
}
|
||||
.w-24 {
|
||||
width: calc(var(--spacing) * 24);
|
||||
}
|
||||
.w-32 {
|
||||
width: calc(var(--spacing) * 32);
|
||||
}
|
||||
.w-40 {
|
||||
width: calc(var(--spacing) * 40);
|
||||
}
|
||||
.w-44 {
|
||||
width: calc(var(--spacing) * 44);
|
||||
}
|
||||
.w-48 {
|
||||
width: calc(var(--spacing) * 48);
|
||||
}
|
||||
.w-fit {
|
||||
width: fit-content;
|
||||
}
|
||||
@ -473,9 +399,6 @@
|
||||
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
}
|
||||
.transform {
|
||||
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
||||
}
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -485,9 +408,6 @@
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@ -500,6 +420,9 @@
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
@ -521,24 +444,12 @@
|
||||
.gap-x-4 {
|
||||
column-gap: calc(var(--spacing) * 4);
|
||||
}
|
||||
.gap-y-4 {
|
||||
row-gap: calc(var(--spacing) * 4);
|
||||
}
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
.overflow-x-auto {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.overflow-x-hidden {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.overflow-y-scroll {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.rounded-full {
|
||||
border-radius: calc(infinity * 1px);
|
||||
}
|
||||
@ -580,9 +491,6 @@
|
||||
.border-gray-300 {
|
||||
border-color: var(--color-gray-300);
|
||||
}
|
||||
.border-red-500 {
|
||||
border-color: var(--color-red-500);
|
||||
}
|
||||
.border-white {
|
||||
border-color: var(--color-white);
|
||||
}
|
||||
@ -598,9 +506,6 @@
|
||||
.bg-gray-200 {
|
||||
background-color: var(--color-gray-200);
|
||||
}
|
||||
.bg-red-500 {
|
||||
background-color: var(--color-red-500);
|
||||
}
|
||||
.bg-white {
|
||||
background-color: var(--color-white);
|
||||
}
|
||||
@ -612,10 +517,6 @@
|
||||
--tw-gradient-position: to right in oklab;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
.from-blue-50 {
|
||||
--tw-gradient-from: var(--color-blue-50);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
.from-blue-100 {
|
||||
--tw-gradient-from: var(--color-blue-100);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
@ -624,18 +525,6 @@
|
||||
--tw-gradient-from: var(--color-blue-400);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
.from-blue-500 {
|
||||
--tw-gradient-from: var(--color-blue-500);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
.to-blue-100 {
|
||||
--tw-gradient-to: var(--color-blue-100);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
.to-blue-200 {
|
||||
--tw-gradient-to: var(--color-blue-200);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
.to-blue-600 {
|
||||
--tw-gradient-to: var(--color-blue-600);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
@ -644,13 +533,6 @@
|
||||
--tw-gradient-to: var(--color-purple-100);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
.to-purple-600 {
|
||||
--tw-gradient-to: var(--color-purple-600);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
.p-0 {
|
||||
padding: calc(var(--spacing) * 0);
|
||||
}
|
||||
.p-2 {
|
||||
padding: calc(var(--spacing) * 2);
|
||||
}
|
||||
@ -762,6 +644,9 @@
|
||||
.whitespace-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.text-black {
|
||||
color: var(--color-black);
|
||||
}
|
||||
.text-blue-500 {
|
||||
color: var(--color-blue-500);
|
||||
}
|
||||
@ -777,6 +662,9 @@
|
||||
.text-gray-800 {
|
||||
color: var(--color-gray-800);
|
||||
}
|
||||
.text-red-500 {
|
||||
color: var(--color-red-500);
|
||||
}
|
||||
.text-white {
|
||||
color: var(--color-white);
|
||||
}
|
||||
@ -790,10 +678,6 @@
|
||||
--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / 0.05));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
.shadow-lg {
|
||||
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
.shadow-md {
|
||||
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
@ -802,65 +686,24 @@
|
||||
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
.shadow-xl {
|
||||
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
.ring-2 {
|
||||
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
.shadow-black {
|
||||
--tw-shadow-color: #000;
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
--tw-shadow-color: color-mix(in oklab, var(--color-black) var(--tw-shadow-alpha), transparent);
|
||||
}
|
||||
}
|
||||
.shadow-blue-100 {
|
||||
--tw-shadow-color: oklch(93.2% 0.032 255.585);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
--tw-shadow-color: color-mix(in oklab, var(--color-blue-100) var(--tw-shadow-alpha), transparent);
|
||||
}
|
||||
}
|
||||
.shadow-blue-300 {
|
||||
--tw-shadow-color: oklch(80.9% 0.105 251.813);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
--tw-shadow-color: color-mix(in oklab, var(--color-blue-300) var(--tw-shadow-alpha), transparent);
|
||||
}
|
||||
}
|
||||
.shadow-blue-500 {
|
||||
--tw-shadow-color: oklch(62.3% 0.214 259.815);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
--tw-shadow-color: color-mix(in oklab, var(--color-blue-500) var(--tw-shadow-alpha), transparent);
|
||||
}
|
||||
}
|
||||
.shadow-blue-600 {
|
||||
--tw-shadow-color: oklch(54.6% 0.245 262.881);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
--tw-shadow-color: color-mix(in oklab, var(--color-blue-600) var(--tw-shadow-alpha), transparent);
|
||||
}
|
||||
}
|
||||
.shadow-blue-700 {
|
||||
--tw-shadow-color: oklch(48.8% 0.243 264.376);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
--tw-shadow-color: color-mix(in oklab, var(--color-blue-700) var(--tw-shadow-alpha), transparent);
|
||||
}
|
||||
}
|
||||
.shadow-blue-800 {
|
||||
--tw-shadow-color: oklch(42.4% 0.199 265.638);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
--tw-shadow-color: color-mix(in oklab, var(--color-blue-800) var(--tw-shadow-alpha), transparent);
|
||||
}
|
||||
}
|
||||
.shadow-gray-300 {
|
||||
--tw-shadow-color: oklch(87.2% 0.01 258.338);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
--tw-shadow-color: color-mix(in oklab, var(--color-gray-300) var(--tw-shadow-alpha), transparent);
|
||||
}
|
||||
}
|
||||
.ring-transparent {
|
||||
--tw-ring-color: transparent;
|
||||
}
|
||||
.outline {
|
||||
outline-style: var(--tw-outline-style);
|
||||
outline-width: 1px;
|
||||
@ -896,19 +739,13 @@
|
||||
.\[-webkit-box-orient\:vertical\] {
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.\[-webkit-line-clamp\:1\] {
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
.\[-webkit-line-clamp\:4\] {
|
||||
-webkit-line-clamp: 4;
|
||||
}
|
||||
.hover\:scale-105 {
|
||||
.hover\:cursor-pointer {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
--tw-scale-x: 105%;
|
||||
--tw-scale-y: 105%;
|
||||
--tw-scale-z: 105%;
|
||||
scale: var(--tw-scale-x) var(--tw-scale-y);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -955,14 +792,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:shadow-lg {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:shadow-md {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@ -979,14 +808,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:shadow-xl {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:shadow-blue-300 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@ -997,13 +818,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:ring-blue-300 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
--tw-ring-color: var(--color-blue-300);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:ring-blue-700 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@ -1083,12 +897,6 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.md\:size-8 {
|
||||
@media (width >= 48rem) {
|
||||
width: calc(var(--spacing) * 8);
|
||||
height: calc(var(--spacing) * 8);
|
||||
}
|
||||
}
|
||||
.md\:size-32 {
|
||||
@media (width >= 48rem) {
|
||||
width: calc(var(--spacing) * 32);
|
||||
@ -1106,11 +914,6 @@
|
||||
width: calc(1/2 * 100%);
|
||||
}
|
||||
}
|
||||
.md\:w-1\/4 {
|
||||
@media (width >= 48rem) {
|
||||
width: calc(1/4 * 100%);
|
||||
}
|
||||
}
|
||||
.md\:w-2\/3 {
|
||||
@media (width >= 48rem) {
|
||||
width: calc(2/3 * 100%);
|
||||
@ -1126,11 +929,6 @@
|
||||
width: calc(var(--spacing) * 48);
|
||||
}
|
||||
}
|
||||
.md\:w-full {
|
||||
@media (width >= 48rem) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.md\:px-44 {
|
||||
@media (width >= 48rem) {
|
||||
padding-inline: calc(var(--spacing) * 44);
|
||||
@ -1190,26 +988,6 @@
|
||||
inherits: false;
|
||||
initial-value: 0;
|
||||
}
|
||||
@property --tw-rotate-x {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-rotate-y {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-rotate-z {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-skew-x {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-skew-y {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-border-style {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
@ -1400,32 +1178,12 @@
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-scale-x {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 1;
|
||||
}
|
||||
@property --tw-scale-y {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 1;
|
||||
}
|
||||
@property --tw-scale-z {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 1;
|
||||
}
|
||||
@layer properties {
|
||||
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
|
||||
*, ::before, ::after, ::backdrop {
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-translate-z: 0;
|
||||
--tw-rotate-x: initial;
|
||||
--tw-rotate-y: initial;
|
||||
--tw-rotate-z: initial;
|
||||
--tw-skew-x: initial;
|
||||
--tw-skew-y: initial;
|
||||
--tw-border-style: solid;
|
||||
--tw-gradient-position: initial;
|
||||
--tw-gradient-from: #0000;
|
||||
@ -1469,9 +1227,6 @@
|
||||
--tw-drop-shadow-size: initial;
|
||||
--tw-duration: initial;
|
||||
--tw-ease: initial;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-scale-z: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user