tabs.tsx
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

tabs.tsx
View Options

	import type { FlatTemplatable } from "tempstream";
	import { TempstreamJSX } from "tempstream";

	const ids = (function* () {
	let i = 0;
	while (true) {
	yield i++;
	if (i >= 100000) {
	i = 0;
	}
	}
	})();

	export function tabs({
	tabs,
	default_tab,
	tab_bar,
	remember_tab = false,
	active_navbar_tab_style = "",
	}: {
	tabs: { id: string; label?: string; content: FlatTemplatable }[];
	default_tab: string;
	tab_bar?: FlatTemplatable;
	remember_tab?: boolean;
	active_navbar_tab_style?: string;
	}) {
	const tab_section_id = ids.next().value;
	return (
	<section class={`tabs tabs__${tab_section_id}`}>
	{tab_bar \|\| (
	<nav>
	{tabs.map(({ id, label }) => (
	<div class="tabs__tab-label">
	<label>
	<input
	type="radio"
	id={`tabs__${tab_section_id}__tab__${id}`}
	name={`tabs__${tab_section_id}`}
	checked={id == default_tab}
	autocomplete={remember_tab ? false : "off"}
	/>
	{label \|\| id}
	{
	/* HTML */ `<style>
	.tabs__${tab_section_id} nav label:has(input:checked) {
	${active_navbar_tab_style}
	}
	</style>`
	}
	</label>
	</div>
	))}
	</nav>
	)}
	{tabs.map(({ id, content }) => {
	const tab_id = `tabs__${tab_section_id}__tab__${id}`;
	return (
	<div class={`tabs__tab tabs__${tab_section_id}__tab ` + tab_id}>
	{
	/* HTML */ `<style>
	body:has(#tabs__${tab_section_id}__tab__${id}:checked)
	.${tab_id} {
	display: block;
	}
	</style>`
	}
	{content}
	</div>
	);
	})}
	</section>
	);
	}