mirror of https://github.com/sussy-code/smov.git
80 lines
2.2 KiB
TypeScript
80 lines
2.2 KiB
TypeScript
import { Icon, Icons } from "@/components/Icon";
|
|
import { WideContainer } from "@/components/layout/WideContainer";
|
|
import { Divider } from "@/components/utils/Divider";
|
|
import { Heading1 } from "@/components/utils/Text";
|
|
import { conf } from "@/setup/config";
|
|
|
|
import { SubPageLayout } from "./layouts/SubPageLayout";
|
|
|
|
// TODO Put all of this not here (when I'm done writing them)
|
|
|
|
function SidebarSection(props: { title: string; children: React.ReactNode }) {
|
|
return (
|
|
<section>
|
|
<p className="text-sm font-bold uppercase text-settings-sidebar-type-secondary mb-2">
|
|
{props.title}
|
|
</p>
|
|
{props.children}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function SidebarLink(props: { children: React.ReactNode; icon: Icons }) {
|
|
return (
|
|
<div className="w-full px-2 py-1 flex items-center space-x-3">
|
|
<Icon
|
|
className="text-2xl text-settings-sidebar-type-icon"
|
|
icon={props.icon}
|
|
/>
|
|
<span>{props.children}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SettingsSidebar() {
|
|
// eslint-disable-next-line no-restricted-globals
|
|
const hostname = location.hostname;
|
|
|
|
return (
|
|
<div>
|
|
<div className="sticky top-24 text-settings-sidebar-type-inactive">
|
|
<SidebarSection title="Settings">
|
|
<SidebarLink icon={Icons.WAND}>Account</SidebarLink>
|
|
</SidebarSection>
|
|
<Divider />
|
|
<SidebarSection title="App information">
|
|
<div className="flex justify-between items-center space-x-3">
|
|
<span>Version</span>
|
|
<span>{conf().APP_VERSION}</span>
|
|
</div>
|
|
<div className="flex justify-between items-center space-x-3">
|
|
<span>Domain</span>
|
|
<span className="text-right">{hostname}</span>
|
|
</div>
|
|
</SidebarSection>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SettingsLayout(props: { children: React.ReactNode }) {
|
|
return (
|
|
<WideContainer ultraWide>
|
|
<div className="grid grid-cols-[260px,1fr] gap-12">
|
|
<SettingsSidebar />
|
|
{props.children}
|
|
</div>
|
|
</WideContainer>
|
|
);
|
|
}
|
|
|
|
export function SettingsPage() {
|
|
return (
|
|
<SubPageLayout>
|
|
<SettingsLayout>
|
|
<Heading1>Setting</Heading1>
|
|
</SettingsLayout>
|
|
</SubPageLayout>
|
|
);
|
|
}
|