70 lines
2.1 KiB
TypeScript
70 lines
2.1 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>
|
|
);
|
|
}
|
|
|