1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
"use client"
import { useUserInterfaceStore } from "@/lib/stores/user-interface-store"
import { SubscriptionsSettings } from "./subscriptions-settings"
import { FoldersSettings } from "./folders-settings"
import { MutedPhrasesSettings } from "./muted-phrases-settings"
import { CustomFeedsSettings } from "./custom-feeds-settings"
import { ImportExportSettings } from "./import-export-settings"
import { AppearanceSettings } from "./appearance-settings"
import { AccountSettings } from "./account-settings"
import { BillingSettings } from "./billing-settings"
import { ApiSettings } from "./api-settings"
import { DangerZoneSettings } from "./danger-zone-settings"
const TABS = [
{ key: "subscriptions", label: "subscriptions" },
{ key: "folders", label: "folders" },
{ key: "muted-phrases", label: "muted phrases" },
{ key: "custom-feeds", label: "custom feeds" },
{ key: "import-export", label: "import / export" },
{ key: "appearance", label: "appearance" },
{ key: "account", label: "account" },
{ key: "billing", label: "billing" },
{ key: "api", label: "api" },
{ key: "danger", label: "danger zone" },
] as const
export function SettingsShell() {
const activeTab = useUserInterfaceStore((state) => state.activeSettingsTab)
const setActiveTab = useUserInterfaceStore(
(state) => state.setActiveSettingsTab
)
return (
<div className="flex h-full flex-col">
<header className="flex items-center border-b border-border px-4 py-3">
<h1 className="text-text-primary">settings</h1>
</header>
<nav className="border-b border-border">
<select
value={activeTab}
onChange={(event) => setActiveTab(event.target.value as typeof activeTab)}
className="w-full border-none bg-background-primary px-4 py-2 text-text-primary outline-none md:hidden"
>
{TABS.map((tab) => (
<option key={tab.key} value={tab.key}>
{tab.label}
</option>
))}
</select>
<div className="hidden md:flex">
{TABS.map((tab) => (
<button
key={tab.key}
onClick={() => setActiveTab(tab.key)}
className={`shrink-0 px-4 py-2 transition-colors ${
activeTab === tab.key
? "border-b-2 border-text-primary text-text-primary"
: "text-text-dim hover:text-text-secondary"
}`}
>
{tab.label}
</button>
))}
</div>
</nav>
<div className="flex-1 overflow-y-auto">
<div className="max-w-4xl">
{activeTab === "subscriptions" && <SubscriptionsSettings />}
{activeTab === "folders" && <FoldersSettings />}
{activeTab === "muted-phrases" && <MutedPhrasesSettings />}
{activeTab === "custom-feeds" && <CustomFeedsSettings />}
{activeTab === "import-export" && <ImportExportSettings />}
{activeTab === "appearance" && <AppearanceSettings />}
{activeTab === "account" && <AccountSettings />}
{activeTab === "billing" && <BillingSettings />}
{activeTab === "api" && <ApiSettings />}
{activeTab === "danger" && <DangerZoneSettings />}
</div>
</div>
</div>
)
}
|