56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import { useTheme } from "@/context/ThemeContext";
|
|
import { TABS, TabsCount } from "@/utils/navigation";
|
|
import { For } from "solid-js";
|
|
import { SelectableBox, SelectableText } from "@/components/Selectable";
|
|
import { useNavigation } from "@/context/NavigationContext";
|
|
|
|
export const tabs: TabDefinition[] = [
|
|
{ id: TABS.FEED, label: "Feed" },
|
|
{ id: TABS.MYSHOWS, label: "My Shows" },
|
|
{ id: TABS.DISCOVER, label: "Discover" },
|
|
{ id: TABS.SEARCH, label: "Search" },
|
|
{ id: TABS.PLAYER, label: "Player" },
|
|
{ id: TABS.SETTINGS, label: "Settings" },
|
|
];
|
|
|
|
export function TabNavigation() {
|
|
const { theme } = useTheme();
|
|
const { activeTab, setActiveTab, activeDepth } = useNavigation();
|
|
return (
|
|
<box
|
|
border
|
|
borderColor={activeDepth() !== 0 ? theme.border : theme.accent}
|
|
backgroundColor={"transparent"}
|
|
style={{
|
|
flexDirection: "column",
|
|
width: 12,
|
|
height: TabsCount * 3 + 2,
|
|
}}
|
|
>
|
|
<For each={tabs}>
|
|
{(tab) => (
|
|
<SelectableBox
|
|
border
|
|
height={3}
|
|
selected={() => tab.id == activeTab()}
|
|
onMouseDown={() => setActiveTab(tab.id)}
|
|
>
|
|
<SelectableText
|
|
selected={() => tab.id == activeTab()}
|
|
primary
|
|
alignSelf="center"
|
|
>
|
|
{tab.label}
|
|
</SelectableText>
|
|
</SelectableBox>
|
|
)}
|
|
</For>
|
|
</box>
|
|
);
|
|
}
|
|
|
|
export type TabDefinition = {
|
|
id: TABS;
|
|
label: string;
|
|
};
|