From ae11a889f6f3c48eb2ea0059142f7119ae6bcead Mon Sep 17 00:00:00 2001 From: Hayden Hargreaves Date: Mon, 23 Jun 2025 22:18:24 -0700 Subject: [PATCH] (UI/STYLE): Finalized the home page UI implementation. Everything the page needs is here! This can be merged into master! It's time to move into the create page and recipe backend. --- doc/TechnicalSpecification.md | 22 +- internal/templates/components/banner.templ | 7 + internal/templates/components/banner_templ.go | 53 +++ internal/templates/components/cards.templ | 72 ++++ internal/templates/components/cards_templ.go | 168 +++++++++ internal/templates/components/dropdowns.templ | 78 ++++ .../templates/components/dropdowns_templ.go | 182 +++++++++ internal/templates/pages/home.templ | 181 +++------ internal/templates/pages/home_templ.go | 347 +++--------------- web/static/css/tailwind.css | 90 +++++ 10 files changed, 761 insertions(+), 439 deletions(-) create mode 100644 internal/templates/components/banner.templ create mode 100644 internal/templates/components/banner_templ.go create mode 100644 internal/templates/components/cards.templ create mode 100644 internal/templates/components/cards_templ.go create mode 100644 internal/templates/components/dropdowns.templ create mode 100644 internal/templates/components/dropdowns_templ.go diff --git a/doc/TechnicalSpecification.md b/doc/TechnicalSpecification.md index 0ad9d2f..0a2ed9e 100644 --- a/doc/TechnicalSpecification.md +++ b/doc/TechnicalSpecification.md @@ -41,20 +41,20 @@ well as view lists of recently made recipes, recently viewed and trending recipe - [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" + - [ ] ~Interactive banner that can be hidden with a "Got it!" or "X"~ -- [ ] Message & Pills Banner - - [ ] Message with text like "Craving Something Specific?" - - [ ] Pill buttons below which allow for a direct search for meal type +- [x] Message & Pills Banner + - [x] Message with text like "Craving Something Specific?" + - [ ] ~Pill buttons below which allow for a direct search for meal type~ -- [ ] Search bar - - [ ] Ability to search for recipes, meals, and tags +- [x] Search bar + - [x] Ability to search for recipes, meals, and tags -- [ ] Filter drop down - - [ ] **Filter by meal** - *E_Meal enum type* - - [ ] **Filter by time requirements** - *15min, 30min, 1hr, 1.5hr, +1.5hr* - - [ ] **Filter by difficulty** - *1 to 5 stars* - - [ ] **Filter by serving size** - *1 to 16* +- [x] Filter drop down + - [x] **Filter by meal** - *E_Meal enum type* + - [x] **Filter by time requirements** - *15min, 30min, 1hr, 1.5hr, +1.5hr* + - [x] **Filter by difficulty** - *1 to 5 stars* + - [x] **Filter by serving size** - *1 to 16* - [x] Recipe of The Week - [x] **Single recipe display** of the best performing recipe, with spotlight effect diff --git a/internal/templates/components/banner.templ b/internal/templates/components/banner.templ new file mode 100644 index 0000000..997106b --- /dev/null +++ b/internal/templates/components/banner.templ @@ -0,0 +1,7 @@ +package components + +templ BannerText(content string) { +

+ { content } +

+} diff --git a/internal/templates/components/banner_templ.go b/internal/templates/components/banner_templ.go new file mode 100644 index 0000000..44042cb --- /dev/null +++ b/internal/templates/components/banner_templ.go @@ -0,0 +1,53 @@ +// Code generated by templ - DO NOT EDIT. + +// templ: version: v0.3.898 +package components + +//lint:file-ignore SA4006 This context is only used if a nested component is present. + +import "github.com/a-h/templ" +import templruntime "github.com/a-h/templ/runtime" + +func BannerText(content string) 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_Var1 := templ.GetChildren(ctx) + if templ_7745c5c3_Var1 == nil { + templ_7745c5c3_Var1 = templ.NopComponent + } + ctx = templ.ClearChildren(ctx) + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "

") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + var templ_7745c5c3_Var2 string + templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(content) + if templ_7745c5c3_Err != nil { + return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/banner.templ`, Line: 5, Col: 11} + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2)) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "

") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return nil + }) +} + +var _ = templruntime.GeneratedTemplate diff --git a/internal/templates/components/cards.templ b/internal/templates/components/cards.templ new file mode 100644 index 0000000..d31e7a3 --- /dev/null +++ b/internal/templates/components/cards.templ @@ -0,0 +1,72 @@ +package components + +templ likeButton(liked bool) { + +} + +templ RecipeCardSmall(name, meal, author string, liked bool) { +
+ +
+

+ { name } +

+

+ { author } +

+
+

+ { meal } +

+ @likeButton(liked) +
+ +
+
+} + +templ RecipeCardLarge(liked bool) { +
+ +
+

Avocado Toast

+

+ Hayden Hargreaves +

+

+ 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. +

+
+

+ Breakfast - 15 min +

+ @likeButton(liked) +
+ +
+
+} diff --git a/internal/templates/components/cards_templ.go b/internal/templates/components/cards_templ.go new file mode 100644 index 0000000..72add43 --- /dev/null +++ b/internal/templates/components/cards_templ.go @@ -0,0 +1,168 @@ +// Code generated by templ - DO NOT EDIT. + +// templ: version: v0.3.898 +package components + +//lint:file-ignore SA4006 This context is only used if a nested component is present. + +import "github.com/a-h/templ" +import templruntime "github.com/a-h/templ/runtime" + +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_Var1 := templ.GetChildren(ctx) + if templ_7745c5c3_Var1 == nil { + templ_7745c5c3_Var1 = templ.NopComponent + } + ctx = templ.ClearChildren(ctx) + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return nil + }) +} + +func RecipeCardSmall(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_Var2 := templ.GetChildren(ctx) + if templ_7745c5c3_Var2 == nil { + templ_7745c5c3_Var2 = templ.NopComponent + } + ctx = templ.ClearChildren(ctx) + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "

") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + 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/components/cards.templ`, Line: 25, Col: 12} + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3)) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "

") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + var templ_7745c5c3_Var4 string + templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(author) + if templ_7745c5c3_Err != nil { + return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/cards.templ`, Line: 28, Col: 14} + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4)) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "

") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + var templ_7745c5c3_Var5 string + templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(meal) + if templ_7745c5c3_Err != nil { + return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/cards.templ`, Line: 32, Col: 14} + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5)) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "

") + 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, 9, "
") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return nil + }) +} + +func RecipeCardLarge(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_Var6 := templ.GetChildren(ctx) + if templ_7745c5c3_Var6 == nil { + templ_7745c5c3_Var6 = templ.NopComponent + } + ctx = templ.ClearChildren(ctx) + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "

Avocado Toast

Hayden Hargreaves

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.

Breakfast - 15 min

") + 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, 11, "
") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return nil + }) +} + +var _ = templruntime.GeneratedTemplate diff --git a/internal/templates/components/dropdowns.templ b/internal/templates/components/dropdowns.templ new file mode 100644 index 0000000..b74bd4f --- /dev/null +++ b/internal/templates/components/dropdowns.templ @@ -0,0 +1,78 @@ +package components + +templ dropdownButton(name string) { + +} + +templ FilterDropdown() { + + +} diff --git a/internal/templates/components/dropdowns_templ.go b/internal/templates/components/dropdowns_templ.go new file mode 100644 index 0000000..9a881d1 --- /dev/null +++ b/internal/templates/components/dropdowns_templ.go @@ -0,0 +1,182 @@ +// Code generated by templ - DO NOT EDIT. + +// templ: version: v0.3.898 +package components + +//lint:file-ignore SA4006 This context is only used if a nested component is present. + +import "github.com/a-h/templ" +import templruntime "github.com/a-h/templ/runtime" + +func dropdownButton(name string) 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_Var1 := templ.GetChildren(ctx) + if templ_7745c5c3_Var1 == nil { + templ_7745c5c3_Var1 = templ.NopComponent + } + ctx = templ.ClearChildren(ctx) + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return nil + }) +} + +func FilterDropdown() 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_Var3 := templ.GetChildren(ctx) + if templ_7745c5c3_Var3 == nil { + templ_7745c5c3_Var3 = templ.NopComponent + } + ctx = templ.ClearChildren(ctx) + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "

Meal

") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = dropdownButton("Breakfast").Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = dropdownButton("Lunch").Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = dropdownButton("Dinner").Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = dropdownButton("Desert").Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = dropdownButton("Snack").Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = dropdownButton("Side").Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = dropdownButton("Other").Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "

Cook Time

") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = dropdownButton("< 15 min").Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = dropdownButton("15 to 30 min").Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = dropdownButton("30 to 60 min").Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = dropdownButton("60 to 120 min").Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = dropdownButton("+120 min").Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "

Difficulty

") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = dropdownButton("Easy").Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = dropdownButton("Intermediate").Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = dropdownButton("Challegening").Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = dropdownButton("Extreme").Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "

Serving Size

") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = dropdownButton("1 to 2").Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = dropdownButton("1 to 4").Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = dropdownButton("4 to 6").Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = dropdownButton("6 to 8").Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = dropdownButton("8+").Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "
") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return nil + }) +} + +var _ = templruntime.GeneratedTemplate diff --git a/internal/templates/pages/home.templ b/internal/templates/pages/home.templ index f4dd750..2a4ba81 100644 --- a/internal/templates/pages/home.templ +++ b/internal/templates/pages/home.templ @@ -22,71 +22,51 @@ templ introSection() { } -templ pillButton(name string) { - -} - -templ bannerText(content string) { -

- { content } -

-} - templ searchBar() { -
- - - - +
+
+ + + + +
+ @filterButton()
} +templ filterButton() { + +} + templ searchSection() {
- @bannerText("Craving Something Specific?") -
+ @components.BannerText("Craving Something Specific?") +
@searchBar() -
- @pillButton("Breakfast") - @pillButton("Lunch") - @pillButton("Dinner") - @pillButton("Desert") - @pillButton("Snack") - @pillButton("Side") - @pillButton("Other") -
- + @components.FilterDropdown()
} -templ largeLikeButton(liked bool) { - -} - templ highlightSection(liked bool) {
- @bannerText("Recipe of the Week!") + @components.BannerText("Recipe of the Week!")

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 @@ -95,101 +75,32 @@ templ highlightSection(liked bool) { resonate with our users!

-
- -
-

Avocado Toast

-

- Hayden Hargreaves -

-

- 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. -

-
-

- Breakfast - 15 min -

- @likeButton(liked) -
- -
-
+ @components.RecipeCardLarge(false)
} -templ likeButton(liked bool) { - -} - -templ smallRecipeIcon(name, meal, author string, liked bool) { -
- -
-

- { name } -

-

- { author } -

-
-

- { meal } -

- @likeButton(liked) -
- -
-
-} - templ listsSection() {
- @bannerText("Take Another Look.") + @components.BannerText("Take Another Look.")

Recently viewed

- @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) + @components.RecipeCardSmall("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true) + @components.RecipeCardSmall("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false) + @components.RecipeCardSmall("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false) + @components.RecipeCardSmall("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true) + @components.RecipeCardSmall("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false) + @components.RecipeCardSmall("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false)

Make again

- @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) + @components.RecipeCardSmall("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true) + @components.RecipeCardSmall("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false) + @components.RecipeCardSmall("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false) + @components.RecipeCardSmall("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true) + @components.RecipeCardSmall("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false) + @components.RecipeCardSmall("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false)
diff --git a/internal/templates/pages/home_templ.go b/internal/templates/pages/home_templ.go index 00eaa66..6dd1a3e 100644 --- a/internal/templates/pages/home_templ.go +++ b/internal/templates/pages/home_templ.go @@ -39,7 +39,7 @@ func introSection() templ.Component { }) } -func pillButton(name string) templ.Component { +func searchBar() 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 { @@ -60,20 +60,15 @@ func pillButton(name string) templ.Component { templ_7745c5c3_Var2 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -81,7 +76,7 @@ func pillButton(name string) templ.Component { }) } -func bannerText(content string) templ.Component { +func filterButton() 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 { @@ -97,54 +92,12 @@ func bannerText(content string) templ.Component { }() } ctx = templ.InitializeContext(ctx) - templ_7745c5c3_Var4 := templ.GetChildren(ctx) - if templ_7745c5c3_Var4 == nil { - templ_7745c5c3_Var4 = templ.NopComponent + templ_7745c5c3_Var3 := templ.GetChildren(ctx) + if templ_7745c5c3_Var3 == nil { + templ_7745c5c3_Var3 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "

") - if templ_7745c5c3_Err != nil { - return templ_7745c5c3_Err - } - 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: 34, Col: 11} - } - _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5)) - if templ_7745c5c3_Err != nil { - return templ_7745c5c3_Err - } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "

") - if templ_7745c5c3_Err != nil { - return templ_7745c5c3_Err - } - return nil - }) -} - -func searchBar() 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_Var6 := templ.GetChildren(ctx) - if templ_7745c5c3_Var6 == nil { - templ_7745c5c3_Var6 = templ.NopComponent - } - ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -168,20 +121,20 @@ func searchSection() templ.Component { }() } ctx = templ.InitializeContext(ctx) - templ_7745c5c3_Var7 := templ.GetChildren(ctx) - if templ_7745c5c3_Var7 == nil { - templ_7745c5c3_Var7 = templ.NopComponent + templ_7745c5c3_Var4 := templ.GetChildren(ctx) + if templ_7745c5c3_Var4 == nil { + templ_7745c5c3_Var4 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = bannerText("Craving Something Specific?").Render(ctx, templ_7745c5c3_Buffer) + templ_7745c5c3_Err = components.BannerText("Craving Something Specific?").Render(ctx, templ_7745c5c3_Buffer) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -189,83 +142,11 @@ func searchSection() templ.Component { if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "
") + templ_7745c5c3_Err = components.FilterDropdown().Render(ctx, templ_7745c5c3_Buffer) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = pillButton("Breakfast").Render(ctx, templ_7745c5c3_Buffer) - if templ_7745c5c3_Err != nil { - return templ_7745c5c3_Err - } - templ_7745c5c3_Err = pillButton("Lunch").Render(ctx, templ_7745c5c3_Buffer) - if templ_7745c5c3_Err != nil { - return templ_7745c5c3_Err - } - templ_7745c5c3_Err = pillButton("Dinner").Render(ctx, templ_7745c5c3_Buffer) - if templ_7745c5c3_Err != nil { - return templ_7745c5c3_Err - } - templ_7745c5c3_Err = pillButton("Desert").Render(ctx, templ_7745c5c3_Buffer) - if templ_7745c5c3_Err != nil { - return templ_7745c5c3_Err - } - templ_7745c5c3_Err = pillButton("Snack").Render(ctx, templ_7745c5c3_Buffer) - if templ_7745c5c3_Err != nil { - return templ_7745c5c3_Err - } - templ_7745c5c3_Err = pillButton("Side").Render(ctx, templ_7745c5c3_Buffer) - if templ_7745c5c3_Err != nil { - return templ_7745c5c3_Err - } - templ_7745c5c3_Err = pillButton("Other").Render(ctx, templ_7745c5c3_Buffer) - if templ_7745c5c3_Err != nil { - return templ_7745c5c3_Err - } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "
") - if templ_7745c5c3_Err != nil { - return templ_7745c5c3_Err - } - return nil - }) -} - -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 { - 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_Var8 := templ.GetChildren(ctx) - if templ_7745c5c3_Var8 == nil { - templ_7745c5c3_Var8 = templ.NopComponent - } - ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -289,148 +170,28 @@ func highlightSection(liked bool) templ.Component { }() } ctx = templ.InitializeContext(ctx) - templ_7745c5c3_Var9 := templ.GetChildren(ctx) - if templ_7745c5c3_Var9 == nil { - templ_7745c5c3_Var9 = templ.NopComponent + templ_7745c5c3_Var5 := templ.GetChildren(ctx) + if templ_7745c5c3_Var5 == nil { + templ_7745c5c3_Var5 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = bannerText("Recipe of the Week!").Render(ctx, templ_7745c5c3_Buffer) + templ_7745c5c3_Err = components.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, 16, "

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!

Avocado Toast

Hayden Hargreaves

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.

Breakfast - 15 min

") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "

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!

") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = likeButton(liked).Render(ctx, templ_7745c5c3_Buffer) + templ_7745c5c3_Err = components.RecipeCardLarge(false).Render(ctx, templ_7745c5c3_Buffer) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "
") - 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, "") - 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, "

") - if templ_7745c5c3_Err != nil { - return templ_7745c5c3_Err - } - var templ_7745c5c3_Var12 string - 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: 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, 23, "

") - 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, "

") - 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, "

") - 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, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -454,76 +215,76 @@ func listsSection() templ.Component { }() } ctx = templ.InitializeContext(ctx) - templ_7745c5c3_Var15 := templ.GetChildren(ctx) - if templ_7745c5c3_Var15 == nil { - templ_7745c5c3_Var15 = templ.NopComponent + templ_7745c5c3_Var6 := templ.GetChildren(ctx) + if templ_7745c5c3_Var6 == nil { + templ_7745c5c3_Var6 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = bannerText("Take Another Look.").Render(ctx, templ_7745c5c3_Buffer) + templ_7745c5c3_Err = components.BannerText("Take Another Look.").Render(ctx, templ_7745c5c3_Buffer) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "

Recently viewed

") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "

Recently viewed

") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true).Render(ctx, templ_7745c5c3_Buffer) + templ_7745c5c3_Err = components.RecipeCardSmall("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", false).Render(ctx, templ_7745c5c3_Buffer) + templ_7745c5c3_Err = components.RecipeCardSmall("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", false).Render(ctx, templ_7745c5c3_Buffer) + templ_7745c5c3_Err = components.RecipeCardSmall("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", true).Render(ctx, templ_7745c5c3_Buffer) + templ_7745c5c3_Err = components.RecipeCardSmall("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", false).Render(ctx, templ_7745c5c3_Buffer) + templ_7745c5c3_Err = components.RecipeCardSmall("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", false).Render(ctx, templ_7745c5c3_Buffer) + templ_7745c5c3_Err = components.RecipeCardSmall("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, 29, "

Make again

") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "

Make again

") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true).Render(ctx, templ_7745c5c3_Buffer) + templ_7745c5c3_Err = components.RecipeCardSmall("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", false).Render(ctx, templ_7745c5c3_Buffer) + templ_7745c5c3_Err = components.RecipeCardSmall("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", false).Render(ctx, templ_7745c5c3_Buffer) + templ_7745c5c3_Err = components.RecipeCardSmall("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", true).Render(ctx, templ_7745c5c3_Buffer) + templ_7745c5c3_Err = components.RecipeCardSmall("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", false).Render(ctx, templ_7745c5c3_Buffer) + templ_7745c5c3_Err = components.RecipeCardSmall("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", false).Render(ctx, templ_7745c5c3_Buffer) + templ_7745c5c3_Err = components.RecipeCardSmall("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, 30, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -547,12 +308,12 @@ func ctaSection() templ.Component { }() } ctx = templ.InitializeContext(ctx) - templ_7745c5c3_Var16 := templ.GetChildren(ctx) - if templ_7745c5c3_Var16 == nil { - templ_7745c5c3_Var16 = templ.NopComponent + templ_7745c5c3_Var7 := templ.GetChildren(ctx) + if templ_7745c5c3_Var7 == nil { + templ_7745c5c3_Var7 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "

Unleash Your Inner Chef!

Have a unique recipe idea? Want to share your culinary masterpiece with the world? It's time to bring your creations to life!

Create Your Recipe!
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "

Unleash Your Inner Chef!

Have a unique recipe idea? Want to share your culinary masterpiece with the world? It's time to bring your creations to life!

Create Your Recipe!
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -576,16 +337,16 @@ func HomePage() templ.Component { }() } ctx = templ.InitializeContext(ctx) - templ_7745c5c3_Var17 := templ.GetChildren(ctx) - if templ_7745c5c3_Var17 == nil { - templ_7745c5c3_Var17 = templ.NopComponent + templ_7745c5c3_Var8 := templ.GetChildren(ctx) + if templ_7745c5c3_Var8 == nil { + templ_7745c5c3_Var8 = 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, 32, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -609,7 +370,7 @@ func HomePage() templ.Component { if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } diff --git a/web/static/css/tailwind.css b/web/static/css/tailwind.css index ea1a457..1eb2bae 100644 --- a/web/static/css/tailwind.css +++ b/web/static/css/tailwind.css @@ -24,6 +24,7 @@ --color-gray-200: oklch(92.8% 0.006 264.531); --color-gray-300: oklch(87.2% 0.01 258.338); --color-gray-400: oklch(70.7% 0.022 261.325); + --color-gray-500: oklch(55.1% 0.027 264.364); --color-gray-600: oklch(44.6% 0.03 256.802); --color-gray-700: oklch(37.3% 0.034 259.733); --color-gray-800: oklch(27.8% 0.033 256.848); @@ -248,6 +249,9 @@ .mx-4 { margin-inline: calc(var(--spacing) * 4); } + .my-1 { + margin-block: calc(var(--spacing) * 1); + } .my-2 { margin-block: calc(var(--spacing) * 2); } @@ -272,6 +276,12 @@ .mt-16 { margin-top: calc(var(--spacing) * 16); } + .mb-1 { + margin-bottom: calc(var(--spacing) * 1); + } + .mb-2 { + margin-bottom: calc(var(--spacing) * 2); + } .mb-6 { margin-bottom: calc(var(--spacing) * 6); } @@ -323,6 +333,9 @@ .h-6 { height: calc(var(--spacing) * 6); } + .h-24 { + height: calc(var(--spacing) * 24); + } .h-auto { height: auto; } @@ -429,6 +442,12 @@ .justify-center { justify-content: center; } + .gap-1 { + gap: calc(var(--spacing) * 1); + } + .gap-2 { + gap: calc(var(--spacing) * 2); + } .gap-3 { gap: calc(var(--spacing) * 3); } @@ -491,6 +510,15 @@ .border-gray-300 { border-color: var(--color-gray-300); } + .border-gray-400 { + border-color: var(--color-gray-400); + } + .border-gray-500 { + border-color: var(--color-gray-500); + } + .border-red-500 { + border-color: var(--color-red-500); + } .border-white { border-color: var(--color-white); } @@ -650,9 +678,15 @@ .text-blue-500 { color: var(--color-blue-500); } + .text-gray-300 { + color: var(--color-gray-300); + } .text-gray-400 { color: var(--color-gray-400); } + .text-gray-500 { + color: var(--color-gray-500); + } .text-gray-600 { color: var(--color-gray-600); } @@ -708,6 +742,10 @@ outline-style: var(--tw-outline-style); outline-width: 1px; } + .outline-2 { + outline-style: var(--tw-outline-style); + outline-width: 2px; + } .filter { filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } @@ -825,11 +863,46 @@ } } } + .hover\:outline-2 { + &:hover { + @media (hover: hover) { + outline-style: var(--tw-outline-style); + outline-width: 2px; + } + } + } + .hover\:outline-blue-500 { + &:hover { + @media (hover: hover) { + outline-color: var(--color-blue-500); + } + } + } + .focus\:bg-blue-100 { + &:focus { + background-color: var(--color-blue-100); + } + } + .focus\:bg-blue-200 { + &:focus { + background-color: var(--color-blue-200); + } + } + .focus\:bg-blue-300 { + &:focus { + background-color: var(--color-blue-300); + } + } .focus\:bg-gray-50 { &:focus { background-color: var(--color-gray-50); } } + .focus\:text-white { + &:focus { + color: var(--color-white); + } + } .focus\:ring-2 { &:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); @@ -851,6 +924,23 @@ } } } + .focus\:outline-1 { + &:focus { + outline-style: var(--tw-outline-style); + outline-width: 1px; + } + } + .focus\:outline-2 { + &:focus { + outline-style: var(--tw-outline-style); + outline-width: 2px; + } + } + .focus\:outline-blue-500 { + &:focus { + outline-color: var(--color-blue-500); + } + } .focus\:outline-none { &:focus { --tw-outline-style: none;