67 lines
1.4 KiB
TypeScript
67 lines
1.4 KiB
TypeScript
import { useTheme } from "@/context/ThemeContext";
|
|
import { For } from "solid-js";
|
|
|
|
interface TabNavigationProps {
|
|
activeTab: TabId;
|
|
onTabSelect: (tab: TabId) => void;
|
|
}
|
|
|
|
export const tabs: TabDefinition[] = [
|
|
{ id: "feed", label: "Feed" },
|
|
{ id: "shows", label: "My Shows" },
|
|
{ id: "discover", label: "Discover" },
|
|
{ id: "search", label: "Search" },
|
|
{ id: "player", label: "Player" },
|
|
{ id: "settings", label: "Settings" },
|
|
];
|
|
|
|
export function TabNavigation(props: TabNavigationProps) {
|
|
const { theme } = useTheme();
|
|
return (
|
|
<box
|
|
backgroundColor={theme.surface}
|
|
style={{
|
|
flexDirection: "column",
|
|
width: 10,
|
|
flexGrow: 1,
|
|
}}
|
|
>
|
|
<For each={tabs}>
|
|
{(tab) => (
|
|
<box
|
|
border
|
|
borderColor={theme.border}
|
|
onMouseDown={() => props.onTabSelect(tab.id)}
|
|
style={{
|
|
backgroundColor:
|
|
tab.id == props.activeTab ? theme.primary : "transparent",
|
|
}}
|
|
>
|
|
<text
|
|
style={{
|
|
fg: tab.id == props.activeTab ? "white" : theme.text,
|
|
alignSelf: "center",
|
|
}}
|
|
>
|
|
{tab.label}
|
|
</text>
|
|
</box>
|
|
)}
|
|
</For>
|
|
</box>
|
|
);
|
|
}
|
|
|
|
export type TabId =
|
|
| "feed"
|
|
| "shows"
|
|
| "discover"
|
|
| "search"
|
|
| "player"
|
|
| "settings";
|
|
|
|
export type TabDefinition = {
|
|
id: TabId;
|
|
label: string;
|
|
};
|