Tabs

Tabs(default_value: "account", class: 'w-96') do
	TabsList do
		TabsTrigger(value: "account") { "Account" }
		TabsTrigger(value: "password") { "Password" }
	end
	TabsContent(value: "account") do
		div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do
			div(class: "space-y-0") do
				TypographyLarge { "Account" }
				TypographyMuted { "Update your account details." }
			end
		end
	end
	TabsContent(value: "password") do
		div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do
			div do
				TypographyLarge { "Password" }
				TypographyMuted { "Change your password here. After saving, you'll be logged out." }
			end
		end
	end
end

Tabs(default_value: "overview", class: 'w-96') do
	TabsList(class: 'w-full grid grid-cols-2') do
		TabsTrigger(value: "overview") do
			book_icon
			span(class: 'ml-2') { "Overview" }
		end
		TabsTrigger(value: "repositories") do
			repo_icon
			span(class: 'ml-2') { "Repositories" }
		end
	end
	TabsContent(value: "overview") do
		div(class: "rounded-lg border p-6 bg-background text-foreground flex justify-between space-x-4") do
			Avatar do
				AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
				AvatarFallback { "JD" }
			end
			div(class: "space-y-4") do
				div do
					TypographyLarge { "Joel Drapper" }
					TypographyMuted { "Creator of Phlex Components. Ruby on Rails developer." }
				end
				Link(href: "https://github.com/joeldrapper", variant: :outline, size: :sm) do
					github_icon
					span(class: 'ml-2') { "View profile" }
				end
			end
		end
	end
	TabsContent(value: "repositories") do
		div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do
			repo = repositories.first
			Link(href: repo.github_url, variant: :link, class: "pl-0") { repo.name }
			Badge { repo.version }
		end
	end
end

Tabs(default: "password", class: 'w-96') do
	TabsList do
		TabsTrigger(value: "account") { "Account" }
		TabsTrigger(value: "password") { "Password" }
	end
	TabsContent(value: "account") do
		div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do
			div(class: "space-y-0") do
				TypographyLarge { "Account" }
				TypographyMuted { "Update your account details." }
			end
		end
	end
	TabsContent(value: "password") do
		div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do
			div do
				TypographyLarge { "Password" }
				TypographyMuted { "Change your password here. After saving, you'll be logged out." }
			end
		end
	end
end