From 0d61b12561ef48dedbf3fa3f9974f2bed58f332e Mon Sep 17 00:00:00 2001 From: maddalax Date: Sat, 30 Nov 2024 10:57:42 -0600 Subject: [PATCH] fix snippet --- htmgo-site/pages/docs/core-concepts/components.go | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/htmgo-site/pages/docs/core-concepts/components.go b/htmgo-site/pages/docs/core-concepts/components.go index cb8f536..4734ad6 100644 --- a/htmgo-site/pages/docs/core-concepts/components.go +++ b/htmgo-site/pages/docs/core-concepts/components.go @@ -6,6 +6,18 @@ import ( "htmgo-site/ui" ) +const ComponentExampleSnippet = `func Card(ctx *h.RequestContext) *h.Element { + service := tasks.NewService(ctx.ServiceLocator()) + cards, _ := service.List() + + return h.Div( + h.Id("task-card"), + h.Class("bg-white w-full rounded shadow-md"), + CardBody(cards), + ) +} +` + func Components(ctx *h.RequestContext) *h.Page { return DocPage( ctx, @@ -29,7 +41,7 @@ func Components(ctx *h.RequestContext) *h.Page { func ComponentExample() *h.Element { return h.Div( Text("Example:"), - ui.GoCodeSnippet(PagesSnippet), + ui.GoCodeSnippet(ComponentExampleSnippet), Text(` My card component here fetches all my tasks I have on my list, and renders each task. If you are familiar with React, then you would likely place this fetch logic inside of a useEffect or (useQuery library) so it is not constantly re-fetched as the component re-renders.