datastar/site/routes_examples_lazy_tabs.t...

44 lines
1.1 KiB
Plaintext

package site
import (
"fmt"
"github.com/go-faker/faker/v4"
datastar "github.com/starfederation/datastar/sdk/go"
)
templ setupExamplesLazyTabsContent() {
<p>{ faker.Paragraph() }</p>
<p>{ faker.Paragraph() }</p>
<p>{ faker.Paragraph() }</p>
<p>{ faker.Paragraph() }</p>
<p>{ faker.Paragraph() }</p>
}
type LazyTabsSignals struct {
TabID int `json:"tabId"`
}
templ setupExamplesLazyTabsComponent(tabCount int, contents templ.Component, signals *LazyTabsSignals) {
<div id="lazy_tabs" data-signals={ templ.JSONString(signals) } class="flex flex-col">
<div id="tabButtons" role="tablist" class="tabs tabs-bordered overflow-scroll">
for i := 0; i < tabCount; i++ {
<button
id={ fmt.Sprintf("tabBtn%d", i) }
role="tab"
class={ "tab", templ.KV("tab-active", i == signals.TabID) }
data-on-click={ fmt.Sprintf(
"$tabId=%d;%s", i,
datastar.GetSSE("/examples/lazy_tabs/data"),
) }
data-testid={ fmt.Sprintf("tab_%d", i) }
>
Tab { fmt.Sprint(i) }
</button>
}
</div>
<div id="tab_content" class="p-4 shadow-lg bg-base-200">
@contents
</div>
</div>
}