// Code generated by templ - DO NOT EDIT.

// templ: version: v0.2.778
package blocks

//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 Tabs() 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 = templ_7745c5c3_Buffer.WriteString("<div x-data=\"{\n        tabSelected: 1,\n        tabId: $id(&#39;tabs&#39;),\n        tabButtonClicked(tabButton){\n            this.tabSelected = tabButton.id.replace(this.tabId + &#39;-&#39;, &#39;&#39;);\n            this.tabRepositionMarker(tabButton);\n        },\n        tabRepositionMarker(tabButton){\n            this.$refs.tabMarker.style.width=tabButton.offsetWidth + &#39;px&#39;;\n            this.$refs.tabMarker.style.height=tabButton.offsetHeight + &#39;px&#39;;\n            this.$refs.tabMarker.style.left=tabButton.offsetLeft + &#39;px&#39;;\n        },\n        tabContentActive(tabContent){\n            return this.tabSelected == tabContent.id.replace(this.tabId + &#39;-content-&#39;, &#39;&#39;);\n        },\n        tabButtonActive(tabContent){\n            const tabId = tabContent.id.split(&#39;-&#39;).slice(-1);\n            return this.tabSelected == tabId;\n        }\n    }\" x-init=\"tabRepositionMarker($refs.tabButtons.firstElementChild);\" class=\"relative w-full max-w-sm\"><div x-ref=\"tabButtons\" class=\"relative inline-grid items-center justify-center w-full h-10 grid-cols-3 p-1 text-gray-500 bg-white border border-gray-100 rounded-lg select-none\"><button :id=\"$id(tabId)\" @click=\"tabButtonClicked($el);\" type=\"button\" :class=\"{ &#39;bg-gray-100 text-gray-700&#39; : tabButtonActive($el) }\" class=\"relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap\">Tab1</button> <button :id=\"$id(tabId)\" @click=\"tabButtonClicked($el);\" type=\"button\" :class=\"{ &#39;bg-gray-100 text-gray-700&#39; : tabButtonActive($el) }\" class=\"relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap\">Tab2</button> <button :id=\"$id(tabId)\" @click=\"tabButtonClicked($el);\" type=\"button\" :class=\"{ &#39;bg-gray-100 text-gray-700&#39; : tabButtonActive($el) }\" class=\"relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap\">Tab3</button><div x-ref=\"tabMarker\" class=\"absolute left-0 z-10 w-1/2 h-full duration-300 ease-out\" x-cloak><div class=\"w-full h-full bg-gray-100 rounded-md shadow-sm\"></div></div></div><div class=\"relative flex items-center justify-center w-full p-5 mt-2 text-xs text-gray-400 border rounded-md content border-gray-200/70\"><div :id=\"$id(tabId + &#39;-content&#39;)\" x-show=\"tabContentActive($el)\" class=\"relative\">")
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		templ_7745c5c3_Err = Table().Render(ctx, templ_7745c5c3_Buffer)
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div :id=\"$id(tabId + &#39;-content&#39;)\" x-show=\"tabContentActive($el)\" class=\"relative\" x-cloak>And, this is the content for Tab2</div><div :id=\"$id(tabId + &#39;-content&#39;)\" x-show=\"tabContentActive($el)\" class=\"relative\" x-cloak>Finally, this is the content for Tab3</div></div></div>")
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		return templ_7745c5c3_Err
	})
}

func Table() 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 = templ_7745c5c3_Buffer.WriteString("<div class=\"flex flex-col\"><div class=\"overflow-x-auto\"><div class=\"inline-block min-w-full\"><div class=\"overflow-hidden\"><table class=\"min-w-full divide-y divide-neutral-200\"><thead><tr class=\"text-neutral-500\"><th class=\"px-5 py-3 text-xs font-medium text-left uppercase\">Name</th><th class=\"px-5 py-3 text-xs font-medium text-left uppercase\">Age</th><th class=\"px-5 py-3 text-xs font-medium text-left uppercase\">Address</th><th class=\"px-5 py-3 text-xs font-medium text-right uppercase\">Action</th></tr></thead> <tbody class=\"divide-y divide-neutral-200\"><tr class=\"text-neutral-800\"><td class=\"px-5 py-4 text-sm font-medium whitespace-nowrap\">Richard Hendricks</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">30</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">Pied Piper HQ, Palo Alto</td><td class=\"px-5 py-4 text-sm font-medium text-right whitespace-nowrap\"><a class=\"text-blue-600 hover:text-blue-700\" href=\"#\">Edit</a></td></tr><tr class=\"text-neutral-800\"><td class=\"px-5 py-4 text-sm font-medium whitespace-nowrap\">Erlich Bachman</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">40</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">5230 Penfield Ave, Woodland Hills</td><td class=\"px-5 py-4 text-sm font-medium text-right whitespace-nowrap\"><a class=\"text-blue-600 hover:text-blue-700\" href=\"#\">Edit</a></td></tr><tr class=\"text-neutral-800\"><td class=\"px-5 py-4 text-sm font-medium whitespace-nowrap\">Monica Hall</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">35</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">2030 Stewart Drive, Sunnyvale</td><td class=\"px-5 py-4 text-sm font-medium text-right whitespace-nowrap\"><a class=\"text-blue-600 hover:text-blue-700\" href=\"#\">Edit</a></td></tr><tr class=\"text-neutral-800\"><td class=\"px-5 py-4 text-sm font-medium whitespace-nowrap\">Dinesh Chugtai</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">28</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">Pied Piper HQ, Palo Alto</td><td class=\"px-5 py-4 text-sm font-medium text-right whitespace-nowrap\"><a class=\"text-blue-600 hover:text-blue-700\" href=\"#\">Edit</a></td></tr><tr class=\"text-neutral-800\"><td class=\"px-5 py-4 text-sm font-medium whitespace-nowrap\">Gilfoyle</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">32</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">Pied Piper HQ, Palo Alto</td><td class=\"px-5 py-4 text-sm font-medium text-right whitespace-nowrap\"><a class=\"text-blue-600 hover:text-blue-700\" href=\"#\">Edit</a></td></tr></tbody></table></div></div></div></div>")
		if templ_7745c5c3_Err != nil {
			return templ_7745c5c3_Err
		}
		return templ_7745c5c3_Err
	})
}

var _ = templruntime.GeneratedTemplate