51 lines
1.0 KiB
TypeScript
51 lines
1.0 KiB
TypeScript
import { useTheme } from "@/context/ThemeContext";
|
|
|
|
export type TabId =
|
|
| "feed"
|
|
| "shows"
|
|
| "discover"
|
|
| "search"
|
|
| "player"
|
|
| "settings";
|
|
|
|
export type TabDefinition = {
|
|
id: TabId;
|
|
label: string;
|
|
};
|
|
|
|
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" },
|
|
];
|
|
|
|
type TabProps = {
|
|
tab: TabDefinition;
|
|
active: boolean;
|
|
onSelect: (tab: TabId) => void;
|
|
};
|
|
|
|
export function Tab(props: TabProps) {
|
|
const { theme } = useTheme();
|
|
return (
|
|
<box
|
|
border
|
|
borderColor={theme.border}
|
|
onMouseDown={() => props.onSelect(props.tab.id)}
|
|
style={{
|
|
padding: 1,
|
|
backgroundColor: props.active ? theme.primary : "transparent",
|
|
}}
|
|
>
|
|
<text style={{ fg: theme.text }}>
|
|
{props.active ? "[" : " "}
|
|
{props.tab.label}
|
|
{props.active ? "]" : " "}
|
|
</text>
|
|
</box>
|
|
);
|
|
}
|