88 lines
2.3 KiB
TypeScript
88 lines
2.3 KiB
TypeScript
import { Text, View, Pressable } from "react-native";
|
|
import { use, useState, type ReactNode } from "react";
|
|
import { RouterContext, type Route } from ".";
|
|
import { General } from "./settings/general";
|
|
import { Accounts } from "./settings/accounts";
|
|
import { Family } from "./settings/family";
|
|
import { useKeyboard } from "./useKeyboard";
|
|
import { Modal } from "react-native-opentui";
|
|
|
|
type SettingsRoute = Extract<Route, `/settings${string}`>;
|
|
|
|
const TABS = {
|
|
"/settings": {
|
|
label: "💽 General",
|
|
screen: <General />,
|
|
},
|
|
"/settings/accounts": {
|
|
label: "🏦 Bank Accounts",
|
|
screen: <Accounts />,
|
|
},
|
|
"/settings/family": {
|
|
label: "👑 Family",
|
|
screen: <Family />,
|
|
},
|
|
} as const satisfies Record<
|
|
SettingsRoute,
|
|
{ label: string; screen: ReactNode }
|
|
>;
|
|
|
|
type Tab = keyof typeof TABS;
|
|
|
|
export function Settings() {
|
|
const { route, setRoute } = use(RouterContext);
|
|
|
|
useKeyboard(
|
|
(key) => {
|
|
if (key.name == "h") {
|
|
const currentIdx = Object.entries(TABS).findIndex(
|
|
([tabRoute, _]) => tabRoute == route,
|
|
);
|
|
const routes = Object.keys(TABS) as SettingsRoute[];
|
|
const last = routes[currentIdx - 1];
|
|
if (!last) return;
|
|
setRoute(last);
|
|
} else if (key.name == "l") {
|
|
const currentIdx = Object.entries(TABS).findIndex(
|
|
([tabRoute, _]) => tabRoute == route,
|
|
);
|
|
const routes = Object.keys(TABS) as SettingsRoute[];
|
|
const next = routes[currentIdx + 1];
|
|
if (!next) return;
|
|
setRoute(next);
|
|
}
|
|
},
|
|
[route],
|
|
);
|
|
|
|
return (
|
|
<View style={{ flexDirection: "row" }}>
|
|
<View style={{ padding: 10 }}>
|
|
{Object.entries(TABS).map(([tabRoute, tab]) => {
|
|
const isSelected = tabRoute == route;
|
|
|
|
return (
|
|
<Pressable
|
|
key={tab.label}
|
|
style={{ backgroundColor: isSelected ? "black" : undefined }}
|
|
onPress={() => setRoute(tabRoute as SettingsRoute)}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontFamily: "mono",
|
|
color: isSelected ? "white" : "black",
|
|
}}
|
|
>
|
|
{" "}
|
|
{tab.label}{" "}
|
|
</Text>
|
|
</Pressable>
|
|
);
|
|
})}
|
|
</View>
|
|
|
|
<View>{TABS[route as Tab].screen}</View>
|
|
</View>
|
|
);
|
|
}
|