import { createSignal, For, Match, Switch, type JSX } from "solid-js";
import { Button } from "../Button";
import { Flex } from "../Flex";
type TabProps = {
Content: JSX.Element;
Default?: boolean;
Display: string;
Value: string;
};
type TabSwitchProps = {
Tabs: TabProps[];
};
export const TabSwitch = (props: TabSwitchProps) => {
const [currentTab, setCurrentTab] = createSignal<string | undefined>(
props.Tabs.find((tab) => !!tab.Default)?.Value ?? props.Tabs.at(0)?.Value
);
return (
<Flex Direction="column" Gap="medium">
{/* Tab buttons */}
<Flex AlignItems="center" Direction="row" Gap="small">
<For each={props.Tabs} fallback={<div></div>}>
{(tab) => (
<Button OnClick={() => setCurrentTab(tab.Value)}>
{tab.Display}
</Button>
)}
</For>
</Flex>
{/* Tab content */}
<Switch>
<For each={props.Tabs}>
{(tab) => (
<Match when={tab.Value === currentTab()}>{tab.Content}</Match>
)}
</For>
</Switch>
</Flex>
);
};
import { createSignal, For, Match, Switch, type JSX } from "solid-js";
import { Button } from "../Button";
import { Flex } from "../Flex";
type TabProps = {
Content: JSX.Element;
Default?: boolean;
Display: string;
Value: string;
};
type TabSwitchProps = {
Tabs: TabProps[];
};
export const TabSwitch = (props: TabSwitchProps) => {
const [currentTab, setCurrentTab] = createSignal<string | undefined>(
props.Tabs.find((tab) => !!tab.Default)?.Value ?? props.Tabs.at(0)?.Value
);
return (
<Flex Direction="column" Gap="medium">
{/* Tab buttons */}
<Flex AlignItems="center" Direction="row" Gap="small">
<For each={props.Tabs} fallback={<div></div>}>
{(tab) => (
<Button OnClick={() => setCurrentTab(tab.Value)}>
{tab.Display}
</Button>
)}
</For>
</Flex>
{/* Tab content */}
<Switch>
<For each={props.Tabs}>
{(tab) => (
<Match when={tab.Value === currentTab()}>{tab.Content}</Match>
)}
</For>
</Switch>
</Flex>
);
};